2011年04月02日 76条评论

图片放大展示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

“图片放大展示zShowbox“草”代码”有76条评论

  1. A.shun says:

    沙发 :oops:

  2. A.shun says:

    板凳也占领

    这个名字起得- -

    1. zwwooooo says:

      @A.shun
      有好建议么?

  3. 不羡鱼 says:

    代码倒是看得明白,但还没有想到什么要修改的。如果原图太大,body元素点击不到,怎么remove啊?! :twisted:

    1. zwwooooo says:

      @不羡鱼
      body是整个页面,霍霍,我加了demo页面了,你可以试试

  4. 林木木 says:

    呵呵~

    1. zwwooooo says:

      @林木木
      代码写的很俗很菜,木木见笑了。

    2. 林木木 says:

      @zwwooooo
      逻辑很清晰撒,我都不想去想~
      刚看了看,那个body的点击事件应该是在图片点击事情里的吧?

    3. zwwooooo says:

      @林木木
      因为懒,我用body来取代所有点击取消那个图片放大效果

  5. 不羡鱼 says:

    我的头像怎么变成一个大囧?因为我换头像的原因?

    1. zwwooooo says:

      @不羡鱼
      对,慢慢等7天以后

  6. Veezy says:

    z大开个demo站吧~ 不是主题的 :D

    1. zwwooooo says:

      @Veezy
      已经放了个demo页面了

  7. 没有预览效果呢

    1. zwwooooo says:

      @软件盒子
      已经放上了

  8. heson says:

    css中可以给鼠标加个pointer吧···
    jquery中加也可以 :mrgreen: 小建议而已

    1. zwwooooo says:

      @heson
      是可以,这个就给折腾者加了,霍霍

  9. 学夫子 says:

    我的都是手动缩小,嘿嘿

    1. zwwooooo says:

      @学夫子
      这里写的不是缩小效果,是指缩小的图片点击后可以放大展示。

    2. 学夫子 says:

      @zwwooooo 对啊,我那就是有这效果

    3. zwwooooo says:

      @学夫子
      这类效果的插件很多也很强大,我这写的只是非常原始的简单效果代码而已。

  10. 奚少 says:

    很不错的效果,特别是图片 :twisted:

    1. zwwooooo says:

      @奚少
      哈哈哈,我习惯拿这2张图片来做demo了。

    2. schiy says:

      @zwwooooo
      哈哈,图片是亮点 :razz:

    3. zwwooooo says:

      @schiy
      霍霍,调节一下嘛

  11. 囧啊囧 says:

    :lol: 我的也是,我也需要图片自动缩放,然后点击图片看原图,而且没有给图片加链接。

    1. zwwooooo says:

      @囧啊囧
      我今天写了一小段jQuery代码实现自动缩放,主要是为了解决IE6问题,虽然ie7以上、chrome、firefox、opera、safari可以用max-width就行。

  12. 太子虹 says:

    过来看看了,支持博主来了

  13. zhx says:

    又开始无偿奉献啦?

    1. zwwooooo says:

      @zhx
      折腾中自写的一些小功能,不太完美

  14. Paran says:

    大哥 人才啊

    1. zwwooooo says:

      @Paran
      玩玩而已

  15. 正在努力学习中

  16. Alex Gao says:

    我用的是fancybox,是我目前为止觉得最好的灯箱,而且兼容性也很好

    1. zwwooooo says:

      @Alex Gao
      你又换邮箱了,呵呵

  17. smilebull says:

    这个效果挺不错,我用的Auto Highslide考虑卸掉。Auto Highslide好像会自动生成三种大小的图片,占空间啊

    1. zwwooooo says:

      @smilebull
      Auto Highslide比较大

  18. socekin says:

    不错啊,看看怎么用

    1. zwwooooo says:

      @socekin
      暂时还没有实际用途,除非改造+完善一下

  19. Bee君 says:

    偶来看美眉~~本来想用代码的,后来又有些BUG~还是插件吧~不过很小几K

    1. zwwooooo says:

      @Bee君
      插件方便啊

  20. 小邪 says:

    额,那个Demo里面的大图出现的位置好诡异,在浏览器之外了 - -。

    1. zwwooooo says:

      @小邪
      不会吧,貌似只有IE6会啊

    2. 小邪 says:

      @zwwooooo
      https://picasaweb.google.com/lh/photo/JgK5G1oigcpEaq1ILekDNw?feat=directlink
      ╮(╯▽╰)╭。。Chrome 12.0.712.0,可能是版本原因。

    3. zwwooooo says:

      @小邪
      这是bug,目前来说我无法解决的问题,就是出现在图片打开慢的情况下,获取图片大小出错(通常获取为0),小邪有没有解决方法?js的onload方法会不会出现这个情况呢?

    4. 小邪 says:

      @zwwooooo
      唔,我的思路是刚开始可以给那个放大图片的框体设置一个默认的以百分比为单位的尺寸,然后里面的大图垂直加水平居中,接着获取图片大小,开始动画调整框体大小,这样。如果获取失败,恩,框体最多比图片大一些吧。
      恩,更好的方法得做一些试验,回头我回到宿舍看看。 :mrgreen: :mrgreen:

    5. zwwooooo says:

      @小邪
      我现在的处理方法是没有对图片进行获取宽高,直接来个居中的框框,图片居中(垂直因为觉得麻烦就没处理居中),如果图片大于框框就出现滚动轴……具体看看我有图片的文章效果http://zww.me/archives/25435 ,给点意见和改进的代码,哈哈

    6. 小邪 says:

      @zwwooooo
      恩,想了半天还是没什么提高,这个很难取舍耶。
      -----
      我以前写牛奶蛋图片站的时候,就是纠结了半天。
      后来直接在看图页面垂直方向截断了,控制图片长度,这样子就不用滚动条了。
      然后点击图片就直接开新的页面看全图。
      -----
      话说滚动轴应该是不错的选择了。
      要么截断,然后点击图片新窗口看大图。
      要么就直接缩小显示全图(嘿嘿,刚才留言之前被囧到一下)。

    7. zwwooooo says:

      @小邪
      嗯,我觉得不垂直居中也不错,哈,暂时就这样,不管先。

回复给 囧啊囧 ¬
取消回复

昵称 *

网址

B em del U Link Code Quote