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. 卢松松 says:

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

    1. zwwooooo says:

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

  2. 先看看 says:

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

    1. zwwooooo says:

      @先看看
      这个看你需求了

  3. 老饕 says:

    好淫荡的图片~哈

    1. zwwooooo says:

      @老饕
      偶尔需要调节一下

  4. 球犯 says:

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

    1. zwwooooo says:

      @球犯
      感谢你的强烈 :mrgreen:

  5. Microhu says:

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

  6. Microhu says:

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

  7. Microhu says:

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

    1. zwwooooo says:

      @Microhu
      主要是css也写进去了,不然可以更小。

  8. Microhu says:

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

  9. Microhu says:

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

  10. Microhu says:

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

    1. zwwooooo says:

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

  11. 沐歌 says:

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

    1. zwwooooo says:

      @沐歌
      和zshowbox.js同目录

  12. 给博客加上了zShowBox功能 | zhx's blog says:

    [...] 前几天刚刚CP了给WP增加评论邮件通知,今天早上,趁没上班之际,又CP了zShowBox-0.4版 这个功能,就是在博客上单击图片,会单张放大,又能进行上下张图片的选择~这个功能我感觉还是很炫的~使图片浏览体验顿时增加不少~我的博客向来是很少插入博客的,主要原因是我对图片的处理不好~弄的很难看~不过有了zShowBox这个功能,以后可以上图片了~不过俺木有图床啊~不知道主机能不能扛得住~哈哈哈~没事~俺的浏览量就那么几个人~都是新认识的朋友~应该没问题的~ [...]

  13. 永腾达 says:

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

  14. 有点蓝 says:

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

    1. zwwooooo says:

      @有点蓝
      没多少人需要吧,所以我也没更新了

    2. 有点蓝 says:

      @zwwooooo
      不好说,放在RECENTLY UPDATED POSTS里,需要的自取 呵呵

回复给 奚少 ¬
取消回复

昵称 *

网址

B em del U Link Code Quote