使用方法:
1、在页面头部包含 lightbox.js 文件并加载 lightbox.css 样式表文件
1 <script type="text/javascript" src="js/jquery.js"></script> 2 <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> 3 <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插件 。
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>
时间: 2024-10-06 00:25:54