Old

zShowBox 代码版(v0.3)

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

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

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

zShowBox 0.3

by ZWWoOoOo (http://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 (http://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

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

93 comments

  1. Alex Gao Alex Gao Firefox 4.0 Firefox 4.0 Windows XP Windows XP

    哇咔咔~~沙发沙发!!!! :mrgreen:

    沙发
  2. Veezy Veezy Google Chrome 12.0.733.0 Google Chrome 12.0.733.0 Windows 7 Windows 7

    我又犯二了...看完第一段想试下效果,果断点进了小张的淘宝店 :lol:

    板凳
  3. akasuna akasuna Firefox 4.0 Firefox 4.0 Windows XP Windows XP

    效果蛮好的,jQuery & ZWW 威武

    当图片弹出来了,后面的页面可否设置为不能再上下滚动,这样是否更好

    地板
  4. ......
  5. MK MK Google Chrome 10.0.648.204 Google Chrome 10.0.648.204 Windows 7 Windows 7

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

    21楼
  6. liveme liveme Google Chrome 11.0.696.16 Google Chrome 11.0.696.16 Windows 7 Windows 7

    效果还是不错滴 :grin:

    22楼
  7. 筑生活 筑生活 Google Chrome 10.0.648.151 Google Chrome 10.0.648.151 Windows 7 Windows 7

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

    23楼
  8. A.shun A.shun Opera 11.10 Opera 11.10 Windows XP Windows XP

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

    24楼
  9. 韩国 韩国 Google Chrome 6.0.472.63 Google Chrome 6.0.472.63 Windows XP Windows XP

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

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

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

    26楼
  11. Bee君 Bee君 Google Chrome 11.0.696.44 Google Chrome 11.0.696.44 Windows 7 Windows 7

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

    27楼
    • zwwooooo zwwooooo Firefox 4.0 Firefox 4.0 Windows 7 Windows 7

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

  12. 郑永 郑永 Firefox 4.0 Firefox 4.0 Windows XP Windows XP

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

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

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

    29楼
  14. 西风 西风 TheWorld Browser TheWorld Browser Windows XP Windows XP

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

    30楼
  15. 手机元素 手机元素 Firefox 3.0.11 Firefox 3.0.11 Windows XP Windows XP

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

    31楼
  16. yesureadmin yesureadmin Google Chrome 10.0.648.204 Google Chrome 10.0.648.204 Windows XP Windows XP

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

    32楼
    • zwwooooo zwwooooo Firefox 4.0 Firefox 4.0 Windows 7 Windows 7

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

    • yesureadmin yesureadmin Google Chrome 10.0.648.204 Google Chrome 10.0.648.204 Windows XP Windows XP

      @zwwooooo

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

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

    • zwwooooo zwwooooo Firefox 4.0 Firefox 4.0 Windows 7 Windows 7

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

    • zwwooooo zwwooooo Firefox 4.0 Firefox 4.0 Windows 7 Windows 7

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

  17. jayuh jayuh Google Chrome 10.0.648.205 Google Chrome 10.0.648.205 Windows Server 2003 Windows Server 2003

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

    33楼
    • zwwooooo zwwooooo Firefox 4.0 Firefox 4.0 Windows 7 Windows 7

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

    • jayuh jayuh Google Chrome 10.0.648.205 Google Chrome 10.0.648.205 Windows Server 2003 Windows Server 2003

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

    • zwwooooo zwwooooo Firefox 4.0 Firefox 4.0 Windows 7 Windows 7

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

  18. 球犯 球犯 Google Chrome 10.0.648.205 Google Chrome 10.0.648.205 Windows XP Windows XP

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

    34楼
  19. 电商圈商城 电商圈商城 Google Chrome 11.0.696.60 Google Chrome 11.0.696.60 Windows XP Windows XP

    一起来KO掉IE6吧!!

    35楼
  20. nolord nolord Google Chrome 13.0.782.218 Google Chrome 13.0.782.218 Windows XP Windows XP

    :smile: mark 一下啦

    36楼
  21. coolaroc coolaroc Google Chrome 14.0.835.202 Google Chrome 14.0.835.202 Windows Server 2003 Windows Server 2003

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

    37楼
  22. yesureadmin yesureadmin Google Chrome 16.0.899.0 Google Chrome 16.0.899.0 Windows 7 Windows 7
    zShowBox('#content'); //根据自己主题的文章所在设置选择器

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

    38楼
  23. yesureadmin yesureadmin Google Chrome 16.0.899.0 Google Chrome 16.0.899.0 Windows 7 Windows 7

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

    39楼
  24. 米壳网 米壳网 Google Chrome 12.0.742.91 Google Chrome 12.0.742.91 Windows 7 Windows 7

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

    40楼
    • zwwooooo zwwooooo Firefox 9.0.1 Firefox 9.0.1 Windows 7 x64 Edition Windows 7 x64 Edition

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

Leave a Reply