Old

图片放大展示zShowbox“草”代码

这2天在制作一个朋友的主题时遇到的一个需求:原博客的图片都是只有图片,图片没有加链接,只是希望图片宽度大于 680px 的自动缩为宽度 680px,然后点击此图片能展示原图大小。

“点击图片展示原图大小”一开始我考虑到用神马 lightbox、Thickbox 这些比较有名的图片灯箱效果,但由于原来的图片没有加链接,要改造这些插件/代码有点小麻烦,而且朋友说尽量简单,于是决定自己直接动手写一段 jQuery 代码实现。

这段 jQuery 代码是我一边想一边敲的,所以叫“草”代码,而且写的比较“庸俗”,暂时功能简单,我以后有时间会完善一下点击图片,然后展示图片的link地址里面的原图片。只用来展示单一图片。

此代码我随便起了个名:zShowbox,下面是源码,有兴趣的朋友可以折腾一下,代码不简洁,因为是随手敲的,不过也只有几行而已……

zShowbox: 0.1 beta

Demo: 点击图片展示原大图 (注:弹出的图片位置不兼容IE6,因为IE6不支持css的fixed属性)

jQuery(document).ready(function($) {
	// zShowbox by zwwooooo: 点击图片展示原大图
	$('.post img').click(function(){ //.post img 为选择器,根据自己主题更改
		var zshowbox_img_url=$(this).attr('src');
		$('body').append('<div id="zshowbox" style="overflow:hidden;background:#000;z-index:9999;display:none;position:fixed;left:0;top:0;width:100%;height:100%;"></div><div id="zshowbox_img" style="z-index:99999;display:none;position:fixed;left:50%;top:50%;border:5px solid #777;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;box-shadow:1px 1px 5px #333,-1px -1px 5px #333;-moz-box-shadow:1px 1px 5px #333,-1px -1px 5px #333;-webkit-box-shadow:1px 1px 5px #333,-1px -1px 5px #333;"><img src="'+zshowbox_img_url+'" /></div>');
		var width=$('#zshowbox_img').width(), height=$('#zshowbox_img').height();
		width=-(width/2)+'px'; height=-(height/2)+'px';
		$('#zshowbox_img').css({"margin-left":width,"margin-top":height});
		$('#zshowbox').fadeTo("fast",0.3,function(){$('#zshowbox').show();});
		$('#zshowbox_img').fadeIn(400);
		$('body').click(function(){
			$('#zshowbox,#zshowbox_img').fadeOut(400,function(){$('#zshowbox,#zshowbox_img').remove();});
			$('body').unbind('click');
			return false;
		});
		return false;
	});
});

另外,别忘了先加载 jQuery 库。

就这样,祝大家折腾快乐!

zww
or
oooo

声明: 除非注明,ZWWoOoOo文章均为原创,转载请以链接形式标明本文地址
本文地址: https://zww.me/archives/25437

76 comments

  1. A.shun A.shun Opera 11 Opera 11 Windows XP Windows XP

    沙发 :oops:

    沙发
  2. A.shun A.shun Opera 11 Opera 11 Windows XP Windows XP

    板凳也占领

    这个名字起得- -

    板凳
  3. zwwooooo zwwooooo Firefox 4 Firefox 4 Windows 7 Windows 7

    @A.shun
    有好建议么?

  4. ......
  5. wmtimes wmtimes Firefox 4 Firefox 4 Windows 7 Windows 7

    功能简单了说明是轻量级的。如果什么功能都有,内容肯定也会庞大些。

    21楼
    • zwwooooo zwwooooo Firefox 4 Firefox 4 Windows 7 Windows 7

      @wmtimes
      对,我昨天完善了一下自己用,为了兼容ie6,本来1K多的,变成2K多了

  6. 万戈 万戈 Firefox 3 Firefox 3 Windows XP Windows XP

    哟西,又多了一种图片展示效果,收了

    22楼
  7. IM路人 IM路人 Maxthon 3 Maxthon 3 Windows Vista Windows Vista

    :shock: DEMO中这2张还健在丫

    23楼
  8. Willin Wang Willin Wang Firefox 4 Firefox 4 Windows 7 Windows 7

    :grin: 有意思

    24楼
  9. 闲云野鹤 闲云野鹤 Firefox 3 Firefox 3 Windows 7 Windows 7

    这个不错,先拿走了

    25楼
  10. SErHo SErHo Google Chrome 10 Google Chrome 10 Windows 7 Windows 7

    非常喜欢easyfancybox的显示效果,但集成到主题时总是不成功。

    26楼
  11. liveme liveme Google Chrome 11 Google Chrome 11 Windows 7 Windows 7

    现在我博客都去掉了这些图片的功能。

    27楼
  12. 網頁設計 網頁設計 Google Chrome 10 Google Chrome 10 Windows XP Windows XP

    又多了中偶那個圖片展示效果,不錯分享了~

    28楼
  13. yesureadmin yesureadmin Google Chrome 10 Google Chrome 10 Windows XP Windows XP

    真接用你这个替换掉了我的Auto Highslide,但是相比Auto Highslide有二个缺点,我认为,第一Auto Highslide有点击原图自动关闭大图的提示,第二Auto Highslide能自适应全屏,而你的却是显示图片的原始大小,这样不美观,而且出浏览器出现滚动条,你说看一个图片有滚动条多难受?谢谢ZWW

    29楼
    • zwwooooo zwwooooo Google Chrome 10 Google Chrome 10 Windows 7 Windows 7

      @yesureadmin
      这个只是草代码,也可以说是原始代码、土代码、原理……哈哈哈,所以就被要求过多了,不过我会完善下吧,尽量做出简单的

  14. yesureadmin yesureadmin Google Chrome 10 Google Chrome 10 Windows XP Windows XP

    优点是是图片都有效,哈哈

    30楼
  15. 1kaka kaka Internet Explorer 8 Internet Explorer 8 Windows XP Windows XP

    演示第二张图片很亮呀~ :mrgreen:

    31楼

Leave a Reply