jQuery lightBox plugin 源码读后感【原创】

taro

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[settings.activeImage][0]);// 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[settings.activeImage][0];