自从上次折腾了《图片放大展示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，会直接弹出敬告……如下图

折腾完。

• 本文标题：zShowBox 代码版（v0.3）
• 本文链接：https://zww.me/archives/25442
• 发布时间：2011年04月15日 10:18
• 版权声明：除非注明，文章均为 zwwooooo 原创，转载请以链接形式标明本文地址！