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[i].getAttribute('href'),jQueryMatchedObj[i].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 process var 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 otherwise objImagePreloader.οnlοad=function(){}; }; objImagePreloader.src = settings.imageArray[settings.activeImage][0];
2. 功能而在用户观看当前图片时,预先加载前后两边的图片,以此提高图片加载速度。
/** * Preload prev and next images being showed * */ function _preload_neighbor_images() { if ( (settings.imageArray.length -1) > settings.activeImage ) { objNext = new Image(); objNext.src = settings.imageArray[settings.activeImage + 1][0]; } if ( settings.activeImage > 0 ) { objPrev = new Image(); objPrev.src = settings.imageArray[settings.activeImage -1][0]; } }