zShowBox 代码版(v0.3)

» 2011-04-15 93条评论

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

折腾完。

zww
or
oooo

“zShowBox 代码版(v0.3)”有93条评论

  1. Alex Gao says:

    哇咔咔~~沙发沙发!!!! :mrgreen:

    1. zwwooooo says:

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

  2. Veezy says:

    我又犯二了...看完第一段想试下效果,果断点进了小张的淘宝店 :lol:

    1. zwwooooo says:

      @Veezy
      对于图片链接不是图片地址当然就不放大了,呵呵

    2. 蓝冰 says:

      @Veezy
      欢迎经常犯2

  3. akasuna says:

    效果蛮好的,jQuery & ZWW 威武

    当图片弹出来了,后面的页面可否设置为不能再上下滚动,这样是否更好

    1. zwwooooo says:

      @akasuna
      其实你本来就不需要去滚动,图片不会超出浏览窗口,所以这些不必要的代码就不加了,小巧为上。

  4. 支持不支持IE6

    1. Alex Gao says:

      @软件盒子
      放过IE6吧...

    2. zwwooooo says:

      @软件盒子
      你这句话要合理停顿才能看明白啊:支持 不支持IE6 :mrgreen:

    3. zwwooooo says:

      @Alex Gao
      或许他的意思是我回复的意思:支持 不支持IE6

    4. Alex Gao says:

      @zwwooooo
      嗯 要有意群停顿才能看懂

  5. Demon says:

    演示打开图片比较慢呢。

    1. zwwooooo says:

      @Demon
      要等大图片打开呢,不是说本身的图片弹出

  6. IM路人 says:

    :shock: IE6就安心去吧~~~

  7. winy says:

    代码收走,顶你出个插件出来 :mrgreen:

    1. zwwooooo says:

      @winy
      这简单的功能应该不难吧,还不知道插件怎么写呢

    2. 无冷 says:

      @zwwooooo
      支持插件流

  8. 无冷 says:

    demoDe图片是亮点啊

    1. zwwooooo says:

      @无冷
      这个必须的 :mrgreen:

  9. 无冷 says:

    安装出现 插件的头部错误。 :evil:

    1. zwwooooo says:

      @无冷
      - - 这是代码版,不是插件 :arrow:

    2. 无冷 says:

      @zwwooooo
      我看着直接就安装了, :evil:

    3. zwwooooo says:

      @无冷
      所以要养成认真看文章的习惯。

    4. 无冷 says:

      @zwwooooo
      直接就奔着代码去了

  10. 低版本 says:

    DEMO的两张图风格真是迥异呐!! :arrow:

    1. zwwooooo says:

      @低版本
      反差够大吧 :grin:

  11. :shock: 很是强大,支持~

  12. 呵呵,蓝色理想,好多这种代码。

  13. ISayMe says:

    ISayMe: 点击图片后 屏幕变暗,然后只出现一个 小灰点,什么情况? 然后再点击一下 屏幕又还原了
    我不会用 我看了主题 不是id=content 而是class=content 没有id=content这个东西.该怎么办?请问

    额 看错了 有id=content这个东西但是点击图片之后就一个小黑点.再点击一下恢复

    1. zwwooooo says:

      @ISayMe
      看了下你所用的主题,这样
      zShowBox('#content div.content');

    2. ISayMe says:

      @zwwooooo
      经本地wordpress测试 还是那个情况 感谢博主了 看来我的主题的问题和您的代码无缘了

    3. zwwooooo says:

      @ISayMe
      如果你会调试就能找到原因了,你那主题本身很多js

  14. 孤风 says:

    用不上,看看也爽

    1. zwwooooo says:

      @孤风
      围观一下

  15. 你的博客很火!

    1. @zwwooooo
      有这么多人回复你 羡慕啊

  16. HzlzH says:

    lightbox 在高网速好闪眼睛。。。。赶紧换 :mrgreen: :mrgreen:

    1. zwwooooo says:

      @HzlzH
      你对这个简单效果的有兴趣?

  17. 奚少 says:

    很不错的效果啊,我感觉比插件的好多了~不过用了林木木的simplebox代码版,就懒得折腾了~

    1. zwwooooo says:

      @奚少
      我喜欢简单点,而且有时即使自己的代码不怎样也比较喜欢用自己的。

  18. Louis Han says:

    请你们放过IE6吧 :lol:

    1. zwwooooo says:

      @Louis Han
      对啊,ie6没错,是使用者的错

  19. 囧啊囧 says:

    还是那个3d果女的图像

    1. zwwooooo says:

      @囧啊囧
      懒得找图片

  20. C瓜哥 says:

    又有新作品了,不错
    支持一下

发表评论

昵称 *

网址

B em del U Link Code Quote