Old

zShowBox代码版v0.4: 上下张图片点击功能

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

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

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

62 comments

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

    哈哈 终于加上翻页了!现在很完美啦!

    沙发
  2. 奚少 奚少 Internet Explorer 9.0 Internet Explorer 9.0 Windows 7 Windows 7

    好强大了啊,决定抽空折腾上~ :mrgreen:

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

    强劲啊,下一步,支持键盘上的 ↑、↓、←、→ 键,ESC 键。。。。

    地板
  4. ......
  5. 卢松松 卢松松 Firefox 4.0 Firefox 4.0 Windows 7 Windows 7

    广大网民还是喜欢左右点击换图吧?上下也不错,不过不知道用的人多不多

    21楼
    • zwwooooo zwwooooo Firefox 4.0 Firefox 4.0 Windows 7 Windows 7

      @卢松松
      其实呢,这里标题所指的上下张图片是说文章里面的上下张图片,不是说展示后的点击方向。

  6. 先看看 先看看 Sogou Explorer Sogou Explorer Windows XP Windows XP

    这个,我的不知道能否用的到呢

    22楼
  7. 老饕 老饕 Firefox 4.0 Firefox 4.0 Windows 7 x64 Edition Windows 7 x64 Edition

    好淫荡的图片~哈

    23楼
  8. 球犯 球犯 Google Chrome 10.0.648.205 Google Chrome 10.0.648.205 Windows XP Windows XP

    嘿嘿 虽然用不到 不过强烈支持啊~ :mrgreen:

    24楼
  9. Microhu Microhu Google Chrome 10.0.648.205 Google Chrome 10.0.648.205 Windows 7 Windows 7

    这个不错,比我的lightbox更觉更好一些.

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

    感觉比我的lightbox要精简很多. 决定试试

    26楼
  11. Microhu Microhu Google Chrome 10.0.648.205 Google Chrome 10.0.648.205 Windows 7 Windows 7

    测试成功了,js压缩了一下,只有3.2k

    27楼
  12. Microhu Microhu Google Chrome 11.0.696.60 Google Chrome 11.0.696.60 Windows 7 Windows 7

    貌似IE8下面,也打不开图片,只显示loading

    28楼
  13. Microhu Microhu Google Chrome 11.0.696.60 Google Chrome 11.0.696.60 Windows 7 Windows 7

    demo.microhu.com 你可以看看这里

    29楼
  14. Microhu Microhu Google Chrome 11.0.696.60 Google Chrome 11.0.696.60 Windows 7 Windows 7

    我发现,在IE8下,如果图片已经载入完了,点击图片,zshowbox不会显示图片了.
    如果图片还没载入完的时候点图片,zshowbox才会显示图片.

    30楼
    • zwwooooo zwwooooo Namoroka 3.6.17 Namoroka 3.6.17 Windows 7 Windows 7

      @Microhu
      木有看到你有加zShowBox效果代码,你的图片链接也木有必须的class。你测试我的demo正常的话,那么就是你哪里搞错了,或者代码不严谨导致js冲突。

  15. 沐歌 沐歌 Maxthon 3.0 Maxthon 3.0 Windows 7 Windows 7

    zshowbox-loading这张图不能加载,应该放到什么地方啊?

    31楼
  16. 给博客加上了zShowBox功能 | zhx's blog - pingback on 2012/01/17/ 08:38
    32楼
  17. 永腾达 永腾达 Firefox 11.0 Firefox 11.0 Windows XP Windows XP

    我按说明弄上去之后,在FF下正常,在IE8下怎么一直是载入中呀,博主的就一切正常,是不是跟主题中的某些js冲突啊?

    33楼
  18. 有点蓝 有点蓝 Maxthon 3.3.9.1000 Maxthon 3.3.9.1000 Windows 7 Windows 7

    @zwwooooo
    嘢,就是那个功能。
    竟然变了那么久了,不过好像没看到代码更新,我也就误以为是刚刚增加的功能啊,而且你这儿文章里图片确实不多……

    34楼

Leave a Reply