NotesForLignBox是一個基於jQuery基礎開發的圖片放大瀏覽外掛，它支援絕大部分瀏覽器，廣泛應用在圖片檢視的選項中。該外掛有以下幾個強大的功能：

       1.圓角的方式展示展示選中的圖片。   

       2.按鈕式檢視"上一張"或"下一張"圖片。

       3.載入圖片時帶有進度條，顯示載入進度。

       4.可以採用自動播放的方式瀏覽圖片。

       5.多個樣式屬性可以隨意設定。

NotesForLignBox外掛的使用：

（1）外掛按檔案：

       Js-8-5/jquery.notesforlightbox.js

       Css-8-5/jquery.notesforlightbox.css

       Images-8-5/全部圖片

       Pic-8-5/全部圖片

（2）下載地址：

       http://www.notesfor.net/file.axd?file=NFlightBox.zip

（3）功能描述：

 在頁面中，以列表的方式展示某個相簿中的全部圖片，當用戶單擊其中某張圖片時，通過引入的NotesForLightBox外掛採用"燈箱"方式顯示所選中的圖片。

（4）實現程式碼：

<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Jscript/jquery.notesforlightbox.js"></script>
<link rel="stylesheet" type="text/css" href="Css-8-5/jquery.notesforlightbox.css" />

<style type="text/css">
    ....省略部分程式碼
</style>

<script type="text/javascript">
    $(function(){
        $('.divPics a').lightBox({
            overlayBgColor:"#666",    //瀏覽圖片時的背景顏色
            overlayOpacity:0.5,       //背景顏色的透明度
            containerResizeSpeed:600  //圖片切換時的速度
        })
    })
</script>
 

<div class="divFrame">
    <div class="divTitle">
        我的相簿
    </div>
    <div class="divContent">
        <div class="divPics">
            <ul>
                <li>
                    <a href="Pic-8-5/img01.gif" title="第一篇風景圖片">
                    <img src="Pic-8-5/img01.jpg" alt="" />
                </li>
                <li>
                    <a href="Pic-8-5/img02.gif" title="第二篇風景圖片">
                    <img src="Pic-8-5/img02.jpg" alt="" />
                </li>
                <li>
                    <a href="Pic-8-5/img03.gif" title="第三篇風景圖片">
                    <img src="Pic-8-5/img03.jpg" alt="" />
                </li>
                <li>
                    <a href="Pic-8-5/img04.gif" title="第四篇風景圖片">
                    <img src="Pic-8-5/img04.jpg" alt="" />
                </li>
                <li>
                    <a href="Pic-8-5/img05.gif" title="第五篇風景圖片">
                    <img src="Pic-8-5/img05.jpg" alt="" />
                </li>
                <li>
                    <a href="Pic-8-5/img06.gif" title="第六篇風景圖片">
                    <img src="Pic-8-5/img06.jpg" alt="" />
                </li>
            </ul>
        </div>
    </div>
</div>
 

（5）程式碼分析：

為了更好地表現NotesForLignBox外掛瀏覽圖片的效果，除了在頁面中引入JS外掛庫檔案外，還應該包含一個該外掛固有的CSS檔案jQuery.noteforlightbox.css，其程式碼如下：

<link rel="stylesheet" type="text/css" href="Css-8-5/jquery.notesforlightbox.css" />

       當然，使用者可以對該CSS檔案進行修改，以實現更好的頁面效果。同時，該外掛的一些功能性圖片，如"上一張"，"下一張"圖片預設是儲存在資料夾Image中，如果其儲存地址發生了變化，應開啟JS外掛檔案jquery.notesforlightbox.js找到下列程式碼，進行設定：

...
//Configuration related to images
imageLoading:'Images-8-5/Loading.gif',
imageBtnPrev:'Images-8-5/prev.png',
imageBtnNext:'Images-8-5/next.png',
imageBtnClose:'Images-8-5/close.png',
imageBlank:'Images-8-5/lightboc-blank.gif',
imageBtnBottomPrev:'Images-8-5/btm_prev.gif',
imageBtnBottomNext:'Images-8-5/btm_next.gif',
imageBtnPlay:'Images-8-5/start.png',
imageBtnStop:'Images-8-5/pause.png',
...

       全部設定完成以後，接下來的工作就是將頁面中的圖片與外掛相關聯，首先找到頁面中的圖片，然後通過外掛中的lightBox()方法，繫結頁面中的圖片，其實現程式碼如下：

$('.divPics a').lightBox();

        lightBox()方法中有一個可選項引數[option]，用於設定在瀏覽圖片時的各種頁面屬性，其常用的各種屬性如下所示：

$('.divPic a').lightBox({
    overlayBgColor:       //設定一個字串，表示圖片瀏覽時頁面的背景色
    overlayOpacity:       //設定一個數字，表示背景色的透明度，範圍(0.0-0.9)
    fixedNavigation:      //設定一個布林值，表示是否隱藏圖片中的導航按鈕
                          //預設為true，表示只有滑鼠移動時才出現，否則隱藏
    containerBorderSize:  //設定一個數字，表示圖片的內容邊框寬度
    containerResizeSpeed: //設定一個數字，表示圖片間相互切換的速度，預設為500(單位：毫秒)
})