首页 > 代码库 > lightbox使用

lightbox使用

使用方法:


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

1 <script type="text/javascript" src="http://www.mamicode.com/js/jquery.js"></script>
2 <script type="text/javascript" src="http://www.mamicode.com/js/jquery.lightbox-0.5.js"></script>
3 <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/jquery.lightbox-0.5.css">

2,调用实例化灯箱

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

3,扩展:

jQuery lightBox插件配置

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

 1 <script type="text/javascript">
 2     $(function() {
 3         $(‘#gallery a‘).lightBox({
 4         overlayBgColor:"#fff",//设置显示背景
 5         fixedNavigation:false,//是否显示下一页跟上一页的标签
 6         //imageLoading:‘images/lightbox-ico-loading.gif‘,//设置下载图片
 7         //imageBtnPrev:‘images/lightbox-btn-prev.gif‘,//设置上一页按钮的图片地址
 8         //imageBtnNext:‘images/lightbox-btn-next.gif‘,//设置下一页按钮的图片地址
 9         //imageBtnClose:‘images/lightbox-btn-close.gif‘,//设置关闭按钮的图片地址
10         //imageBlank:‘images/lightbox-blank.gif‘,//设置空白的图片地址
11         containerBorderSize:10,//设置显示图片边框的宽度
12         containerResizeSpeed:2000,//设置显示图片的时间
13         txtImage:"图片:",//定义介绍的文字
14         txtOf:"/",//定义页数中间的字符
15         keyToClose:"s",//设置关闭图片的快捷键
16         keyToPrev:"a",//设置上一页的快捷键
17         keyToNext:"d",//设置下一页的快捷键
18         //imageArray:"",
19         activeImage:0,//设置动态显示图片,要用到easing插件
20         easing:"easeOutElastic",
21         overlayOpacity:0.7//设置背景的透明度  
22      });
23  });
24 
25 例子:
26 
27 <script type="text/javascript">
28 $(function() {
29    $(‘a[@rel*=lightbox]‘).lightBox({
30     overlayBgColor: ‘#FFF‘,
31     overlayOpacity: 0.6,
32     imageLoading: ‘http://example.com/images/loading.gif‘,
33     imageBtnClose: ‘http://example.com/images/close.gif‘,
34     imageBtnPrev: ‘http://example.com/images/prev.gif‘,
35     imageBtnNext: ‘http://example.com/images/next.gif‘,
36     containerResizeSpeed: 350,
37     txtImage: ‘Imagem‘,
38     txtOf: ‘de‘
39    });
40 });
41 </script>

 

lightbox下载地址和案例

 

lightbox使用