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

» 2011-04-18 62条评论

前几天的 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: 上下张图片点击功能”有62条评论

  1. Alex Gao says:

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

    1. zwwooooo says:

      @Alex Gao
      你速度真快! :grin:

  2. 奚少 says:

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

    1. zwwooooo says:

      @奚少
      有意思就试试吧

  3. akasuna says:

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

    1. zwwooooo says:

      @akasuna
      不会加这些了,这个本都不打算加的

  4. A.shun says:

    不错不错,不断完善

    1. zwwooooo says:

      @A.shun
      可以了,不要太复杂,因为功能+效果优秀的有很多了,以后只考虑精简好了。

  5. zrqx008 says:

    终于加入上下张翻页功能了。

    1. zwwooooo says:

      @zrqx008
      这个稍微比较必须就决定加上了

  6. Veezy says:

    不错哎,多有z大风格,那两个图片好像一个人...

    1. zwwooooo says:

      @Veezy
      “纯辣” :mrgreen:

  7. 木本无心 says:

    很好,很强大啊。

    1. zwwooooo says:

      @木本无心
      自己用自己的会感觉很爽,这就是自爽

  8. 无冷 says:

    更加完善了

    1. zwwooooo says:

      @无冷
      这个比较需要就加上了

  9. 囧啊囧 says:

    :mrgreen: 和我预想的一样

    1. zwwooooo says:

      @囧啊囧
      厄~你差点就预想错了

  10. reizhi says:

    这件事还是交给插件了

    1. zwwooooo says:

      @reizhi
      插件简单好用

  11. 宝佑 says:

    你这个是页码翻页,还是其它翻页?

    1. zwwooooo says:

      @宝佑
      文字上会让人误解,我更改为“上下张图片点击”

  12. liveme says:

    功能又有更新了,嘿嘿……

    1. zwwooooo says:

      @liveme
      还是加上这个吧

  13. 韩国 says:

    好长的代码啊!

  14. 秦大少 says:

    越来越强大了!!!

    1. zwwooooo says:

      @秦大少
      没,就是简单的功能,够用就好了,不会再加其他功能了。

  15. 孤风 says:

    演示图片真给力

    1. zwwooooo says:

      @孤风
      顺便调节一下嘛

  16. 真的很满美,我的挑剔都得到了解决,谢谢ZWW

    1. zwwooooo says:

      @yesureadmin
      这些对于那些高手来说只是基础代码吧,我对jq也只能简单应用一下。

  17. 杀手爱喝牛奶 says:

    帅气!体积很小很给力!

  18. John says:

    很给力,比很多插件都强多了。有时间折腾看看。

    1. zwwooooo says:

      @John
      这可不敢跟那些优秀的插件比,只是自己写一个玩玩自己用用,然后有兴趣的朋友也可以折腾使用

  19. 小邪 says:

    心动中,等我下次折腾的劲头上来咱就开干嘎嘎。

    1. zwwooooo says:

      @小邪
      小邪重写的话肯定代码简炼多了,我的是随便乱塞的。

  20. Ben says:

    这个, 跟lightbox 比好处是???

    1. zwwooooo says:

      @Ben
      没得比,我这个是写来自用玩的基础代码。

回复给 有点蓝 ¬
取消回复

昵称 *

网址

B em del U Link Code Quote