在做公司企业网站或产品推广项目时，经常遇到需要做图片预览的部分，而这部分效果需要做到很美观的话是很不容易的，我们自己写的预览控件经常会因为兼容性或者显示问题而不实用，所以我们需要有一个能够兼具美观与兼容性并且好用的图片弹层插件，让我们能够在不浪费时间的情况，既使用又美观的载入这样的一个功能，在这里，我就给大家介绍一个比较好用的图片弹层预览插件—jquery.lightbox。

jquery.lightbox在页面中的运用其实还是蛮简单的，它的具体实现都已经封装在jquery.lightbox-0.5.js了，所以我们运用的时候只需要简单的调用他的方法即可。
首先我们在页面中引用jquery与jquery.lightbox-0.5.js两个js，注意的是jquery一定要先引用，然后再引用jquery.lightbox-0.5.js：

第二步，用js在我们需要预览的图片对象上加载封装的预览方法即可，一般是用jquery的加载方式：
$(function() {
$(‘#gallery a’).lightBox();
});
这样取得的将是 $(‘#gallery a’)标签下所有的图片对象进行预览，预览的模式是以弹层的形式，可看到地下会有一排的按钮供点击，上一张，下一张，放大，缩小等。
图片对象的html就可以是用ul或div形式都行了，这里用ul li的模式距离，例如：

ul>
li>
img src=“” alt=”” width=”72″ height=”72″ /> //第一张图片
/a>
li>
img src=“”alt=”” width=”72″ height=”72″ /> //第二张图片
/a>
/ul>
就这样，只需要简单的两个步骤就可以实现图片的预览效果，是不是很简单呢，不过预览效果的显示需要css去控制了，在这里，它是自带了一个样式模版jquery.lightbox-0.5.css，这一个预览的效果还是很不错的，当然，也可以自己写样式做效果。