前几天的 zShowBox v0.3 功能非常单一：单张图片放大。有几个朋友希望有上下张图片点击功能，今天稍微有点时间就加上试试，比原来的代码量增加了 1.1k 左右，算了，4.3 k也不算很大了，因为里面有 css。

zShowBox 0.4 by ZWWoOoOo (https://zww.me)
Copyright (c) 2011 ZWWoOoOo
MIT-style license
===============

Demo:
----------------
Demo / 我博客有图片的文章

Download:
----------------
google code

Features:
----------------
。迷你型图片点击放大展示
。原始js文件只有3.2k (0.4增加上下张图片点击变成 4.3k）
。上下张图片点击功能 (0.4新加)

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>

ChangeLog:
2011-04-17 0.4: Add prev/next function.

下面是源码：

/*
 * zShowBox 0.4 (图片放大展示)
 * by ZWWoOoOo (https://zww.me/)
 * Copyright (c) 2011 ZWWoOoOo
 * MIT-style license
*/
function zShowBox(domChunk) {
	//为每张图片链接加上 class="zshowbox"
	var zcounter=0;
	$(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').attr('id','zsb-'+zcounter); zcounter++; };
	});
	$(domChunk+' a.zshowbox').click(function(){
		var current=$(this).attr('id').split(/zsb-/)[1],
			pagesize=zsb_getPageSize(),
			zsb_img_url=$(this).attr('href'),
			css_zsb_bg='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='z-index:99999;position:fixed;left:50%;top:50%;',
			css_zsb_img='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;',
			css_zsb_p_n='display:none;cursor:pointer;position:absolute;top:50%;line-height:80px;margin:-40px 0 0 0;color:#eee;text-shadow:1px 3px 5px #000;font-size:40px;font-family:Arial,Tahoma;';
		if (typeof document.body.style.maxHeight === "undefined") { //if IE 6
			alert('zShowBox不支持IE6！请你们放过IE6吧，它太老了，就让它安心的去吧……');
			return false;
		} else {
			$('body').append('<div id="zsb_bg" style="'+css_zsb_bg+'"></div><div id="zsb" style="'+css_zsb+'"><img id="zsb_img" style="'+css_zsb_img+'" /><p id="zsb_prev" style="left:-30px;'+css_zsb_p_n+'">&laquo;</p><p id="zsb_next" style="right:-30px;'+css_zsb_p_n+'">&raquo;</p></div>');
			$('#zsb_bg').fadeTo(600,0.7);
			zsh_img('#zsb_img',zsb_img_url,pagesize,current,zcounter);
			$('#zsb_prev,#zsb_next').click(function(){
				if ($(this).attr('id')=='zsb_prev') current--; else current++;
				$(this).parent().prev().css("background-image",'url('+loadingimg+')');
				$('#zsb').find('img').remove().end().append('<img id="zsb_img" style="'+css_zsb_img+'" />');
				zsb_img_url=$('#zsb-'+current).attr('href');
				zsh_img('#zsb_img',zsb_img_url,pagesize,current,zcounter);
				return false;
			});
			$('#zsb_bg,#zsb_img').click(function(){
				$('#zsb_bg,#zsb_img').unbind('click');
				$('#zsb_bg,#zsb').fadeOut(400,function(){$(this).remove();});
				return false;
			});
		}
		return false;
	});
}
function zsh_img(img_id,zsb_img_url,pagesize,current,zcounter) {
	$('#zsb_prev,#zsb_next').hide();
	$(img_id).attr('src',zsb_img_url).load(function(){
		var x = pagesize[0] - 100, y = pagesize[1] - 100;
		var img_w=$(this).width(), img_h=$(this).height();
		if (img_w > x) {
			img_h = img_h * (x / img_w);
			img_w = x;
			if (img_h > y) {
				img_w = img_w * (y / img_h);
				img_h = y;
			}
		} else if (img_h > y) {
			img_w = img_w * (y / img_h);
			img_h = y;
			if (img_w > x) {
				img_h = img_h * (x / img_w);
				img_w = x;
			}
		}
		var marginleft=-(img_w/2+5)+'px', margintop=-(img_h/2+5)+'px';
		img_w=img_w+'px', img_h=img_h+'px';
		$(this).css({"width":img_w,"height":img_h}).fadeIn(600).parent().css({"margin-left":marginleft,"margin-top":margintop}).prev().css("background-image","none");
		if (current>0) $('#zsb_prev').show();
		if (current<zcounter-1) $('#zsb_next').show();
	});
}
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');
})();

喜欢的朋友荒淫使用。

zww

赏

or

oooo

• 本文标题：zShowBox代码版v0.4: 上下张图片点击功能
• 本文链接：https://zww.me/archives/25443
• 发布时间：2011年04月18日 16:03
• 版权声明：除非注明，文章均为 zwwooooo 原创，转载请以链接形式标明本文地址！