1.：
在页面引入如下文件：
<script type="text/javascript" src="script/jquery.min.js"></script>
<scripttype="text/javascript" src="script/jquery.lightbox.js"></script>
<link rel="stylesheet" type="text/css" href="css/lightbox.css"/>
2.编写页面html代码，在body中写入如下代码：
<div id="gallery">
<a href="images/large/blue.jpg" title=""/><img src="images/small/blue.jpg"></a>
<a href="images/large/green.jpg" title="img src="images/small/green.jpg""/></a></a>
<a href="images/large/blue.jpg" title=""/><img src="images/small/blue.jpg"></a>
<a href="images/large/blue.jpg" title=""/><img src="images/small/blue.jpg"></a>
</div>
3.：
开始写jquery代码，在<script>中写入：中写入如下代码：
<script type="text/javascript">
$(document).ready(function(){
$("#gallery a").lightBox({
overlayBgColor:"#000000",
txtOf:"/",
opacity:.6,
txtImage:"图片",
imageBtnClose:"images/button_bg_over.png"
})
})
</script>
一个照片集合的效果就出来了。下面就对于插件的一些属性进行解释：
传给上面呢的lightBox的变量比较常见的有以下几个：
overlayBgColor:显示图像时候覆盖页面的背景颜色；
overlayOpacity：覆盖的透明度；
containerResizeSpeed:在显示照片集的时候，有一张图片过度到另外一张图片的速度；
txtOf:用来设置上面效果中photo 3 of 6的of,比如设置txtOf:"/",则上面的文字将变成“photo 3/ 6”
txtImage:用来设置photo 3 of 6中的photo，比如设置了txtImage:"图片"，则上面的文字将变成"图片 3 of 6"
当然还有imageBtnClose,imageBtnPrev,imageBtnNext,imageLoading等变量可以设置。
