zShowBox 代码版(v0.3)

» 2011-04-15 93条评论

自从上次折腾了《图片放大展示zShowBox“草”代码》后,我的博客就用上了改进后的 zShowBox,本来打算是兼容 IE6 的,但是要兼容 IE6 代码多了三分之一,加上想到微软自己都在为 IE6 倒计时,所以决定放弃 IE6 的兼容。

因为这类效果的插件、代码很多,而且效果很赞,也很小巧。不过用自己折腾的代码还是比较有成就感的,所以即使我折腾的 zShowBox 效果很“土”很普通、名字起的也非常庸俗,但还是用之。

这次先放出代码版,以后考虑做成简单的插件吧,不过对WP的插件没去了解过,有时间有兴趣时再折腾。另外,我不会对 zShowBox 增加额外功能(如同一页面的图片翻页功能),因为我需要的是最简单的功能,而且要这些效果的插件一大堆也非常优秀专业。

zShowBox 0.3

by ZWWoOoOo (https://zww.me)

Copyright (c) 2011 ZWWoOoOo

MIT-style license

========================================

Demo:
----------------
1. demo
2. 本博客有图片的文章,如《WordPress主题发布: Chocolate》《三陪+山陪: 云、山和翎翎

Download:
----------------
Google Code

Features:
----------------
。迷你型图片点击放大展示
。原始js文件只有3.2k + 一个 loading 图片
。IE6不支持,因为懒就Alert直接弹出敬告,请看最下面的图。
。自动查找带链接的图片,只要图片的连接是原图地址的就会有效果

Install:
----------------
1. 把压缩包解压到当前所用主题目录
2. 在 header 加载 jQuery 库和 zShowBox js 文件,例如:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/zshowbox/zshowbox.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function(){
		zShowBox('#content'); //根据自己主题的文章所在设置选择器
	});
</script>

这是我自娱自乐的作品,如果有朋友喜欢的话荒淫使用 + 改进,下面是源码。

jQ 核心源码:

/*
 * zShowBox 0.3 (图片放大展示)
 * by ZWWoOoOo (https://zww.me/)
 * Copyright (c) 2011 ZWWoOoOo
 * MIT-style license
*/
function zShowBox(domChunk) {
	//为每张图片链接加上 class="zshowbox"
	$(domChunk+' a').each(function(){
		var a_href = $(this).attr('href').toLowerCase();
		var file_type = a_href.substring(a_href.lastIndexOf('.'));
		if (file_type == '.jpeg' || file_type == '.jpg' || file_type == '.png' || file_type == '.gif' || file_type == '.bmp'){$(this).addClass('zshowbox')};
	});
	$(domChunk+' a.zshowbox').click(function(){
		var pagesize=zsb_getPageSize(),
			zsb_img_url=$(this).attr('href'),
			css_zsb_bg='style="z-index:9999;overflow:hidden;position:fixed;left:0;top:0;width:100%;height:100%;background:#000 url('+loadingimg+') no-repeat center center;"',
			css_zsb='style="z-index:99999;position:fixed;left:50%;top:50%;"',
			css_zsb_img='style="display:none;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;"';
		if (typeof document.body.style.maxHeight === "undefined") { //if IE 6
			alert('zShowBox不支持IE6!请你们放过IE6吧,它太老了,就让它安心的去吧……');
			return false;
		} else {
			$('body').append('<div id="zsb_bg" '+css_zsb_bg+'></div><div id="zsb" '+css_zsb+'><img id="zsb_img" '+css_zsb_img+' src="'+zsb_img_url+'" /></div>');
			$('#zsb_bg').fadeTo(600,0.7);
			$('#zsb_img').load(function(){
				var x = pagesize[0] - 100;
				var y = pagesize[1] - 100;
				var imgwidth=$(this).width(), imgheight=$(this).height();
				if (imgwidth > x) {
					imgheight = imgheight * (x / imgwidth);
					imgwidth = x;
					if (imgheight > y) {
						imgwidth = imgwidth * (y / imgheight);
						imgheight = y;
					}
				} else if (imgheight > y) {
					imgwidth = imgwidth * (y / imgheight);
					imgheight = y;
					if (imgwidth > x) {
						imgheight = imgheight * (x / imgwidth);
						imgwidth = x;
					}
				}
				var marginleft=-(imgwidth/2)+'px', margintop=-(imgheight/2)+'px';
				imgwidth=imgwidth+'px', imgheight=imgheight+'px';
				$('#zsb_bg').css("background-image","none").next().css({"width":imgwidth,"height":imgheight,"margin-left":marginleft,"margin-top":margintop}).children('img').css({"width":imgwidth,"height":imgheight}).fadeIn(600);
			});
			$('body').click(function(){
				$('#zsb_bg,#zsb').fadeOut(400,function(){$(this).remove();});
				$('body').unbind('click');
				return false;
			});
		}
		return false;
	});
}
function zsb_getPageSize(){
	var de = document.documentElement;
	var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
	var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
	arrayPageSize = [w,h];
	return arrayPageSize;
}
var loadingimg = (function loadingimg(){ //获取loading图片url
	var i=0,got=-1,url,len=document.getElementsByTagName('script').length;
	while(i<=len && got==-1){
		url=document.getElementsByTagName('script')[i].src;
		got=url.indexOf('/zshowbox.js');
		i++;
	}
	return url.replace('/zshowbox.js','/zshowbox-loading.gif');
})();

如果是IE6,会直接弹出敬告……如下图

折腾完。

zww
or
oooo

“zShowBox 代码版(v0.3)”有93条评论

  1. MK says:

    zwwooooo的东西都很精炼的,准备做的新站使用您的主题。。。

    1. zwwooooo says:

      @MK
      荒淫使用

  2. liveme says:

    效果还是不错滴 :grin:

    1. zwwooooo says:

      @liveme
      简单的效果

  3. 筑生活 says:

    评论框的“我坚信……”很给力,给你点了!

  4. A.shun says:

    够小巧
    缩放效果很不错,可惜没有上下张图片的功能- -

    1. zwwooooo says:

      @A.shun
      懒得折腾,稍微复杂,会增加代码量

  5. 韩国 says:

    博主很专业,会有求博主的。

  6. SErHo says:

    哈哈,就是不能支持IE6,人都是惯出来的。

    1. zwwooooo says:

      @SErHo
      嗯嗯,还是省点力吧

  7. Bee君 says:

    Chrome beta 显示有误,第二次打开有问题

    1. zwwooooo says:

      @Bee君
      啥错误?多刷几次吧,我改了几次js,缓存会导致错误

  8. 郑永 says:

    呵呵,来捧场的,虽然没用过。

    1. zwwooooo says:

      @郑永
      谢谢捧场

  9. 会不会自适应屏幕分辩率啊

    1. zwwooooo says:

      @yesureadmin
      有演示何必问呢?呵呵

  10. 西风 says:

    博主能请教下评论框美化吗?我不会哦

    1. zwwooooo says:

      @西风
      写css咯,怎么教?学习一下css吧

  11. 我是来看那个 演示例子中的那张图片来着 :mrgreen:

    1. zwwooooo says:

      @手机元素
      哈哈,百看不厌啊

  12. zshowbox-loading.gif放在哪里?我效果出来了,感觉比之前的要好的多,我把此图片放到各个目录里都不显示啊!我把你的JS合并到我之前已加载的JS里的

    1. zwwooooo says:

      @yesureadmin
      loading图片和zshowbox.js要同一个目录就行,你整合了就要修改js代码了,loading图片目录获取看看最后那个函数,把zshowbox.js改为你的js文件名

    2. @zwwooooo

      zwwooooo:
      loading图片和zshowbox.js要同一个目录就行,你整合了就要修改js代码了,loading图片目录获取看看最后那个函数,把zshowbox.js改为你的js文件名

      这个我早猜到了,我试过了,你看看我的ALL.JS里,最后一段就是你的代码,并且loading图片也在all.js一个目录下,但是还是不显示啊,你帮我看看哪里还错误着

    3. zwwooooo says:

      @yesureadmin
      got=url.indexOf('/zshowbox.js');
      这个你忘了改了

    4. zwwooooo says:

      @yesureadmin
      另外,如果你解决不了可以考虑直接给变量loadingimg一个loading图片的url

  13. jayuh says:

    微软开始IE6倒计时了,我才刚知道,太好了,什么时候IE真的结束了,再写页面的时候,基本就不用考虑兼容性问题了。哈哈哈哈!

    1. zwwooooo says:

      @jayuh
      现在已经不考虑了,除了一些公司、企业类神马的

    2. jayuh says:

      @zwwooooo
      额,你这个回答。。。
      现在做网站,大部分不还都是公司和企业嘛,向我们这样的博客个人站,数量还远远不够。
      (我们公司一个切图的,还只装了IE6,然后经常跑我这儿看IE8的效果。不许偷笑!)

    3. zwwooooo says:

      @jayuh
      我是说我们这类博客就不要考虑ie6了。公司/企业是他们的事,如果有人找我制作要兼容ie6的主题,我就会让主题兼容ie6,当然工钱按原价倍数算。 :mrgreen:

  14. 球犯 says:

    IE6。。。我的同学们都喜欢用。。。我都不知道说什么好了。。。 :mad:

  15. 一起来KO掉IE6吧!!

  16. nolord says:

    :smile: mark 一下啦

  17. coolaroc says:

    我打开了演示页面.chrome下好像有点问题.第一次成功放大了,第二次就不显示了.

    1. zwwooooo says:

      @coolaroc
      厄,我这正常啊。

    2. zwwooooo says:

      @coolaroc
      另外最好用 0.4 版本,http://zww.me/archives/25443

  18. zShowBox('#content'); //根据自己主题的文章所在设置选择器

    这句怎么理解,我哪里的ID是多少,以前用过这代码,现在用一点反应没有。

    1. zwwooooo says:

      @yesureadmin
      你现在的主题是 #container

  19. 乖乖不用麻烦了,被我给试出来了。

    1. zwwooooo says:

      @yesureadmin
      这……你稍微看看jQuery基础就知道了

  20. 米壳网 says:

    虽然不知道你在说什么,但觉得你好像很厉害 :oops:

    1. zwwooooo says:

      @米壳网
      虽然你说你看不懂,但我感觉你很有心,荒淫常来

回复给 yesureadmin ¬
取消回复

昵称 *

网址

B em del U Link Code Quote