jQuery lightBox plugin 源码读后感【原创】
jQuery lightBox plugin简介：Lightbox应该是目前为止最流行的图片浏览插件。jQuery lightBox plugin是作者Leandro Vieira Pinho基于Lightbox2改编的jQuery插件。
功能列表：
[*]自动根据窗口的大小缩放图片
[*]模式窗口，幻灯片方式播放
[*]图片内容预加载
[*]渐变动画效果。
官网地址：
http://leandrovieira.com/projects/jquery/lightbox/
代码介绍：
1，巧妙利用jQuery选择器
使用jQuery lightBox plugin不需要更改你的HTML代码，仅把希望显示的一系列图片url设置在一系列对应的<a>标签的href链接中。利用jQuery选择器获得图片列表，图片列表调用lightBox方法。
$('#gallery a').lightBox();
2，图片列表信息保存在自定义二位数组settings.imageArray中
for ( var i = 0; i < jQueryMatchedObj.length; i++ ) {settings.imageArray.push(new Array(jQueryMatchedObj.getAttribute('href'),jQueryMatchedObj.getAttribute('title')));}这个数组将在预加载图时用到，来获取前后图片的src数据。
3，over-lay 【全屏半透明遮罩】
jQuery lightBox plugin的over-lay实现全页面大小的半透明遮罩，遗憾的是
/**THIRD FUNCTION* getPageSize() by quirksmode.com** @return Array Return an array with page width, height and window width, height*/function ___getPageSize() 引用的第三方计算页面尺寸的方法有bug，其二，由于浏览器兼容问题，firefox得到的页面宽度width和长度height都比实际大。
所以个人认为，实现全页面不如实现全屏幕半透明遮罩。 通过css的position:fixed定位功能使全屏幕半透明遮罩静止在屏幕上，即使拖动滚动条也不会动。修改lightBox css文件:
#jquery-overlay {position: fixed;top: 0;left: 0;z-index: 90;width: 100%;height: 500px;}由于万恶的IE6不支持position:fixed的属性，我们需要利用expression在CSS中写点针对IE6的东东：
/*IE6 fixed*/* html #jquery-overlay {*position: absolute; *left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);*top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);}
4，图片预加载技术
HTML DOM Image 对象代表嵌入的图像。<img> 标签每出现一次，一个 Image 对象就会被创建。src 属性可设置或返回图像的 URL。当把该属性设置为新图像的 URL 时，浏览器就会把那幅新图像装载并显示出来。
jQuery lightBox plugin使用图片预加载技术实现了两个功能：
[*]提前获取即将加载图片的宽度和长度尺寸：
// Image preload processvar objImagePreloader = new Image();objImagePreloader.onload = function() {$('#lightbox-image').attr('src',settings.imageArray);// Perfomance an effect in the image container resizing it _resize_container_image_box(objImagePreloader.width,objImagePreloader.height);//clear onLoad, IE behaves irratically with animated gifs otherwiseobjImagePreloader.onload=function(){};};objImagePreloader.src = settings.imageArray;
页:
[1]