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