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下載地址和案例