jQuery lightBox plugin

函數可使元素 a 的 href 屬性參照的位址 (如圖片、動畫、文章等) ，以直接覆蓋在整個頁面上開啟顯示，並將周圍變暗，彷如燈箱片效果。目前已有很多由 lightBox 再製的特別功用的 plugin 。

載入 jQuery library 及 plugin

下載 script 檔
  1. jQuery library
  2. lightBox 壓縮包 (英文)
解壓縮後在 lightbox 資料夾下可找到如 jquery.lightbox.js 檔，加入 html 片段，
<script src="jquery.js"></script>
<script src="jquery.lightbox.js"></script>
在 lightbox/css 資料夾下找到如 jquery.lightbox.css 檔，在 head 元素內參照此 css 設計原始檔，
<link href="css/jquery.lightbox.css" rel="stylesheet" type="text/css" />

lightBox 基本用法

html 片段
<div class="jqLightBox">
 <ul>
  <li><a href="images/pic1.jpg" title="景色1"><img src="images/thumb/pic1.jpg" alt="景色1" /></a></li>
  <li><a href="images/pic2.jpg" title="景色2"><img src="images/thumb/pic2.jpg" alt="景色2" /></a></li>
  <li><a href="images/pic3.jpg" title="景色3"><img src="images/thumb/pic3.jpg" alt="景色3" /></a></li>
  <li><a href="images/pic4.jpg" title="景色4"><img src="images/thumb/pic4.jpg" alt="景色4" /></a></li>
 </ul>
</div>
script 片段
$("*.jqLightBox a").lightBox();

當使用者在 a 元素按下執行時， a 元素 href 屬性參照的圖檔，會以初始定義方式覆蓋在此頁面上呈現，並將圖片周圍變暗，彷如燈箱片。

jQuery 指定物件及函數使用可參閱 jQuery 基本用法。

a 元素 title 屬性內容會成為燈箱片下方的標題呈現，沒有指定此屬性就不會有標題。

lightBox 函數的參數

使用 object 參數
  1. overlayBgColor

    指定覆蓋整頁的背景色，以 css 16 進位 RGB 數值的文字串表示；初始值為 '#000' 。如，

    $("*.jqLightBox a").lightBox({overlayBgColor:'#291f00'});
  2. overlayOpacity

    指定覆蓋整頁的背景的透明度， 1 為完全不透明， 0 為完全透明， 0.6 為 60% 不透明；初始值為 0.8 。如，

    $("*.jqLightBox a").lightBox({overlayBgColor:'#291f00',overlayOpacity:0.7});
  3. imageLoading

    指定正在載入的示意圖的檔案位址，可以是 gif 動畫，以文字串表示；初始值為 'images/lightbox-ico-loading.gif' 。如，

    $("*.jqLightBox a").lightBox({overlayOpacity:0.7,imageLoading:'images/downloading.gif'});
  4. imageBtnPrev

    指定向上一幅按鈕圖示的檔案位址，以文字串表示；初始值為 'images/lightbox-btn-prev.gif' 。如，

    $("*.jqLightBox a").lightBox({overlayOpacity:0.7,imageBtnPrev:'images/dirLeft.png'});
  5. imageBtnNext

    指定向下一幅按鈕圖示的檔案位址，以文字串表示；初始值為 'images/lightbox-btn-next.gif' 。如，

    $("*.jqLightBox a").lightBox({overlayOpacity:0.7,imageBtnPrev:'images/dirRight.png'});
  6. imageBtnClose

    指定關閉展示按鈕圖示的檔案位址，以文字串表示；初始值為 'images/lightbox-btn-close.gif' 。如，

    $("*.jqLightBox a").lightBox({overlayOpacity:0.7,imageBtnPrev:'images/close9.png'});
  7. fixedNavigation

    指定是否一直顯示上一幅下一幅按鈕，以 Boolean 值表示；初始值為 false ，滑鼠移入才出現按鈕。如，

    $("*.jqLightBox a").lightBox({fixedNavigation:true});
  8. txtImage

    指定項次前的標示文字；初始值為 'Image' 。如，

    $("*.jqLightBox a").lightBox({txtImage:'Europe2009'});
  9. txtOf

    指定項次與總數間的標示文字；初始值為 'of' 。如，

    $("*.jqLightBox a").lightBox({txtImage:'Europe2009',txtOf:'/'});
  10. containerBorderSize

    指定此值可改變圖片邊緣的留白值，惟 css 應指定相同的值給 #lightbox-container-image 的四邊 padding 值，及 #lightbox-container-image-data-box 的左右 padding 值，此定義實際是在增減 #lightbox-container-image-box 的寬高，單位為像素，以整數值表示；初始值為 10 。如，

    $("*.jqLightBox a").lightBox({containerBorderSize:6});
  11. containerResizeSpeed

    指定展開圖片的動畫時間，單位為 ms ，以整數值表示；初始值為 400 。如，

    $("*.jqLightBox a").lightBox({containerResizeSpeed:250});
  12. keyToPrev

    指定向上一幅的鍵盤字母按鍵，以文字串表示；初始值為 'p' 。如，

    $("*.jqLightBox a").lightBox({keyToPrev:'b'});
  13. keyToNext

    指定向下一幅的鍵盤字母按鍵，以文字串表示；初始值為 'n' 。如，

    $("*.jqLightBox a").lightBox({keyToNext:'f'});
  14. keyToClose

    指定關閉展示的鍵盤字母按鍵，以文字串表示；初始值為 'c' ；而字母 X 按鍵不需指定即可當成關閉。如，

    $("*.jqLightBox a").lightBox({keyToClose:'q'});
  15. imageBlank

    指定透明 gif 圖片檔位址，此定義用在修正 ie6 等舊版瀏覽器，以文字串表示；初始值為 'images/lightbox-blank.gif' 。如，

    $("*.jqLightBox a").lightBox({imageBlank:'images/blank.gif'});
參考資源

更新日期：