这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

• 本文标题：图片放大展示zShowbox“草”代码
• 本文链接：https://zww.me/archives/25437
• 发布时间：2011年04月02日 20:48
• 版权声明：除非注明，文章均为 zwwooooo 原创，转载请以链接形式标明本文地址！