jQuery弹出层插件--lightbox

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等变量可以设置。