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

» 2011-04-02 76条评论

这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“草”代码”有76条评论

  1. wmtimes says:

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

    1. zwwooooo says:

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

  2. 万戈 says:

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

    1. zwwooooo says:

      @万戈
      万戈写的话应该更好,我这有点囧

  3. IM路人 says:

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

    1. zwwooooo says:

      @IM路人
      霍霍,这反差这么大的当然要保存好

    2. CXM says:

      @zwwooooo
      比较喜欢第二张,你是不是把下面的P掉了~ :wink:

    3. zwwooooo says:

      @CXM
      本来就是这样的,这样的才好,给你幻想 :grin:

  4. :grin: 有意思

    1. zwwooooo says:

      @Willin Wang
      玩玩,呵呵

  5. 这个不错,先拿走了

    1. zwwooooo says:

      @闲云野鹤
      研究研究,暂时不太实用

  6. SErHo says:

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

    1. zwwooooo says:

      @SErHo
      这个没用过,按道理集成是可以的。

  7. liveme says:

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

    1. zwwooooo says:

      @liveme
      需要者折腾

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

    1. zwwooooo says:

      @網頁設計
      这是很简单的一个效果,还没有完善

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

    1. zwwooooo says:

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

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

    1. zwwooooo says:

      @yesureadmin
      应该说图片的链接是图片地址的都有效 :mrgreen:

  11. kaka says:

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

回复给 kaka ¬
取消回复

昵称 *

网址

B em del U Link Code Quote