图片灯箱插件NotesForLignBox（如何调用jQuery插件学习第五天）

       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(单位：毫秒)
})