对jQuery下LightBox的改进

米落,2008年12月28日

  这是一个Zblog的插件,使用效果如下:请点击下面图片.

   没排版,没设置,仅仅只是把以上图片上传后自动插入编辑器里作为一个段落而已,一切设置都是自动的.可以说是非常傻瓜化的.
   点击图片可以看到弹入了图片浏览模式,很直观的浏览方式.以前很多款都已经实现了这种效果,只是大多都是基于prototype框架的.
   现在,在jQuery框架下也有了新的选择,LightBox, 基于jQuery框架的,原地址:http://www.huddletogether.com/projects/lightbox2/
   我是在原有的Zblog插件LightBox基础之上进行了修改.插件原地址:http://labs.cloudream.name/z-blog/lightbox/
   修改很简单,因为原有的图片浏览插件需要给图片加上链接之后才有作用.
   比如上传图片后需要加入

<a href="OnePic.jpg"><img src="OnePic.jpg" /></a>

   但是很多时候我们都不太愿意给那些没有链接意义的图片加上地址,好在这是基于jQuery的插件.我们可以对其进行改造.
   在原插件目录下Code文件夹下,lightbox.pack.js文件258行.替换成如下

$(document).ready(function (){
	$(window).load(function (){
		$("img").each(function(){  //遍历整个图片标签
		    /* 过滤一些无关图 */
		    var tStr = $(this).attr("src").toUpperCase();  //把地址转换为大写
		    if(tStr.indexOf("/IMAGE/LOGO") == -1 && tStr.indexOf("/IMAGE/EDIT/") == -1 && tStr.indexOf("/IMAGE/COMMON/") == -1 &&
		    tStr.indexOf("/IMAGE/FACE/") == -1 && tStr.indexOf("/plugin/") == -1){  //过滤包含几个Zblog自带的图片目录,以及插件目录的图片
		        var $a = $("<a></a>").attr("href", $(this).attr("src"));  //自动为图片标签添加链接
		        $(this).wrap($a);  //包围到图片标签上去
		    }
		});
		$("a").each(function (){
			var $a=$(this);
			var $href=$a.attr("href");
			if(/\.(jp[eg]|jpeg|png|gif|bmp|tiff?|icon?)$/i.test($href)){
				$a.addClass("lightbox");
			}
		});
		$("a.lightbox").lightBox(lightBoxSetting)
	})
});

   所改地方都添加了注释,因该很容易明白.
  这点上就能看出jQuery的方便了吧.

Tags: jQuery  JavaScript  

分类: Programer | 评论:9 | 浏览: