lightbox使用

使用方法：

1、在页面头部包含 lightbox.js 文件并加载 lightbox.css 样式表文件

 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
 <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css">

2，调用实例化灯箱

$('#gallery a').lightBox(); 　　　　
$('a.lightbox').lightBox(); 　　　
$('a').lightBox(); 

3，扩展：

jQuery lightBox插件配置

在该配置中，您可以定制您的jQuery lightBox插件 。

 <script type="text/javascript">
     $(function() {
        　$('#gallery a').lightBox({
     　　　　overlayBgColor:"#fff",//设置显示背景
    　　　　 fixedNavigation:false,//是否显示下一页跟上一页的标签
     　　　　//imageLoading:'images/lightbox-ico-loading.gif',//设置下载图片
     　　　　//imageBtnPrev:'images/lightbox-btn-prev.gif',//设置上一页按钮的图片地址
    　　　　 //imageBtnNext:'images/lightbox-btn-next.gif',//设置下一页按钮的图片地址
     　　　　//imageBtnClose:'images/lightbox-btn-close.gif',//设置关闭按钮的图片地址
    　　　　 //imageBlank:'images/lightbox-blank.gif',//设置空白的图片地址
     　　　　containerBorderSize:10,//设置显示图片边框的宽度
    　　　　 containerResizeSpeed:2000,//设置显示图片的时间
    　　　　 txtImage:"图片:",//定义介绍的文字
     　　　　txtOf:"/",//定义页数中间的字符
   　　　　  keyToClose:"s",//设置关闭图片的快捷键
    　　　　 keyToPrev:"a",//设置上一页的快捷键
    　　　　 keyToNext:"d",//设置下一页的快捷键
   　　　　  //imageArray:"",
    　　　　 activeImage:0,//设置动态显示图片，要用到easing插件
    　　　　 easing:"easeOutElastic",
     　　　　overlayOpacity:0.7//设置背景的透明度
   　　 });
  });

 例子：

 <script type="text/javascript">
 $(function() {
    $('a[@rel*=lightbox]').lightBox({
 　　　　overlayBgColor: '#FFF',
 　　　　overlayOpacity: 0.6,
 　　　　imageLoading: 'http://example.com/images/loading.gif',
 　　　　imageBtnClose: 'http://example.com/images/close.gif',
 　　　　imageBtnPrev: 'http://example.com/images/prev.gif',
 　　　　imageBtnNext: 'http://example.com/images/next.gif',
 　　　　containerResizeSpeed: 350,
 　　　　txtImage: 'Imagem',
 　　　　txtOf: 'de'
    });
 });
 </script>

lightbox下载地址和案例