NotesForLightBox  實際執行畫面

NotesForLightBox 是一個 jQuery 的套件簡單容易使用，可覆蓋過當前頁面的圖片和內容，這是一個可以設置和適用於所有的現代瀏覽器，圓角播放的燈箱還有擁有導航的按鈕和幻燈片播放功能還有幻燈片顯示進度條。

使用方法：
首先載入程式所需要的 JavaScript 程式碼
//使用Google ajax API 直接連結 jQuery 1.7.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
//NotesForLightBox 主程式碼部分
<script src="js/NFLightBox.js" type="text/javascript"></script>
<link href="css/nf.lightbox.css" rel="stylesheet" type="text/css" media="screen" />

NotesForLightBox 本範例實做樣式

本範例HTML部分
<div id="gallery">
  <ul>
<li><a href="photos/image5.jpg" title="Add title to show image name or description"><img src="photos/thumb_image5.jpg" width="100" alt="" /></a></li>
    <li><a href="photos/image6.jpg" title="Add title to show image name or description"><img src="photos/thumb_image6.jpg" width="100" alt="" /></a></li>
    <li><a href="photos/image7.jpg" title="Add title to show image name or description"><img src="photos/thumb_image7.jpg" width="100" alt="" /></a></li>
    <li><a href="photos/image8.jpg" title="Add title to show image name or description"><img src="photos/thumb_image8.jpg" width="100" alt="" /></a></li>
    <li><a href="photos/image9.jpg" title="Add title to show image name or description"><img src="photos/thumb_image9.jpg" width="100" alt="" /></a></li>
    <li><a href="photos/image10.jpg" title="Add title to show image name or description"><img src="photos/thumb_image10.jpg" width="100" alt="" /></a></li>
    <li><a href="photos/image11.jpg" title="Add title to show image name or description"><img src="photos/thumb_image11.jpg" width="100" alt="" /></a></li>
    <li><a href="photos/image12.jpg" title="Add title to show image name or description"><img src="photos/thumb_image12.jpg" width="100" alt="" /></a></li>
    <li><a href="photos/image1.jpg" title="Add title to show image name or description"><img src="photos/thumb_image1.jpg" width="100" alt="" /></a></li>
    <li><a href="photos/image2.jpg" title="Add title to show image name or description"><img src="photos/thumb_image2.jpg" width="100" alt="" /></a></li>
    <li><a href="photos/image3.jpg" title="Add title to show image name or description"><img src="photos/thumb_image3.jpg" width="100" alt="" /></a></li>
    <li><a href="photos/image4.jpg" title="Add title to show image name or description"><img src="photos/thumb_image4.jpg" width="100" alt="" /></a></li>
  </ul>
</div>

本範例CSS設計
#gallery{
    background-color: #444;
    padding: 10px;
    width: 520px;
}
#gallery ul{
    list-style: none;
}
#gallery ul li{
    display: inline;
}
#gallery ul img{
    border: 5px solid #3e3e3e;
    border-width: 5px 5px 20px;
}
#gallery ul a:hover img{
    border: 5px solid #fff;
    border-width: 5px 5px 20px;
    color: #fff;
}
#gallery ul a:hover{
    color: #fff;
}

最後加上 JavaScript
$(function() {
    var settings = { containerResizeSpeed: 350};
    $('#gallery a').lightBox(settings);
});

本程式可設定參數值

參數	型態	說明
overlayBgColor	字串	背景覆蓋顏色.例 #000000
overlayOpacity	整數	透明度的數值 1-9
fixedNavigation	布林	前後頁導航是否持續存在
imageLoading	字串	讀取中的圖片
imageBtnPrev	字串	前一張的顯示圖片
imageBtnNext	字串	後一張的顯示圖片
imageBtnClose	字串	關閉按鈕的圖片
imageBlank	字串	下方空白連結圖片
imageBtnBottomPrev	字串	下方前一頁按鈕圖片
imageBtnBottomNext	字串	下方後一頁按鈕圖片
imageBtnPlay	字串	投影片撥放圖片
imageBtnStop	字串	投影片停止圖片
containerBorderSize	整數	外框的寬度
containerResizeSpeed	整數	圖像自動調整的動話時間.預設500(毫秒)
txtImage	字串	左下角的文字說明
txtOf	字串	1 of 12 的of 的字串設定
txtPrev	字串	前一頁的文字
txtNext	字串	後一頁的文字
keyToClose	字串	鍵盤的關閉快捷鍵
keyToPrev	字串	鍵盤的前一頁快捷鍵
keyToNext	字串	鍵盤的下一頁快捷鍵
slideShowTimer	整數	換圖片的時間.單位為毫秒

作者網站：http://www.notesfor.net/post/NotesForLightBox.aspx
檔案大小：0.98 MB(包含範例)
檔案下載：http://www.notesfor.net/file.axd?file=NFLightBox.zip
檔案備份：下載