综述
我们肯定用过 QQ 空间吧，看到 QQ 空间里面的照片，点一下就会出现一个悬浮框，显示放大后的图片，而且可以点击左右箭头来查看上一张和下一张照片，怎样？这种效果，想不想实现一下。 在这里，我们就引用一个 jQuery 插件来帮助我们完成这件事情，让我们拭目以待吧
在线演示
我们首先来在线演示一下效果，然后我们说一下是怎样的实现，点开链接进行预览吧 在线预览
插件文件
其中包含了两个 JS 文件，一个是 jQuery 库，另一个就是 lightbox 插件文件。另外还有一个 css 文件，主要作用是给图片浏览器规定样式
HTML
我们写一个 DEMO，包含了六张图片，用一个 ul 列表呈现出来
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
<!DOCTYPE> <html > <head > <meta charset ="utf-8" /> <title > notesforlightbox实例</title > <script src ="js/jquery-1.4.2.min.js" > </script > <script src ="js/jquery.notesforlightbox.js" > </script > <link rel ="stylesheet" type ="text/css" href ="css/jquery.notesforlightbox.css" /> <style type ="text/css" > body {font-size :13px } .divFrame {width :380px ;border :solid 1px #666 } .divFrame .divTitle {padding :5px ;background-color :#eee ;font-weight :bold} .divFrame .divContent {padding :8px ;line-height :1.6em } .divFrame .divContent .divPics {background-color : #777 ;padding : 10px ;width : 344px } .divFrame .divContent .divPics ul {list-style : none;padding :0px ;margin :0px } .divFrame .divContent .divPics ul li {display : inline;} .divFrame .divContent .divPics ul img {border : 5px solid #444 ;border-width : 5px ;width :100px ;height :100px } .divFrame .divContent .divPics ul a :hover img {border :5px solid #fff ;border-width : 5px ;color : #fff ;} .divFrame .divContent .divPics ul a :hover {color : #fff ;} </style > <script type ="text/javascript" > $(function ( $('.divPics a' ).lightBox({ overlayBgColor: "#666" , overlayOpacity: 0.5 , containerResizeSpeed: 600 }) }) </script > </head > <body > <div class ="divFrame" > <div class ="divTitle" > 我的相册 </div > <div class ="divContent" > <div class ="divPics" > <ul > <li > <a href ="images/img01.jpg" title ="第1篇风景图片" > <img src ="images/img01.jpg" alt ="" /> </a > </li > <li > <a href ="images/img02.jpg" title ="第2篇风景图片" > <img src ="images/img02.jpg" alt ="" /> </a > </li > <li > <a href ="images/img03.jpg" title ="第3篇风景图片" > <img src ="images/img03.jpg" alt ="" /> </a > </li > <li > <a href ="images/img04.jpg" title ="第4篇风景图片" > <img src ="images/img04.jpg" alt ="" /> </a > </li > <li > <a href ="images/img05.jpg" title ="第5篇风景图片" > <img src ="images/img05.jpg" alt ="" /> </a > </li > <li > <a href ="images/img06.jpg" title ="第6篇风景图片" > <img src ="images/img06.jpg" alt ="" /> </a > </li > </ul > </div > </div > </div > </body > </html >
其中 images 文件夹中存在了六张图片，其中每一个中的超链接的 href 链接是一张图片，超链接中还包含了 img 标签。这样可以保证点击图片的时候可以呼出一张大图。
功能简析
1 2 3 4 5 6 7
$(function ( $('.divPics a' ).lightBox({ overlayBgColor: "#666" , overlayOpacity: 0.5 , containerResizeSpeed: 600 }) })
我们取到了所有的超链接元素，然后调用了 lightBox 方法，参数是一系列集合，在这里定义了
1 2 3
overlayBgColor: "#666" , overlayOpacity: 0.5 , containerResizeSpeed: 600
在这里给出所有的参数说明
名称
默认值
说明
overlayBgColor
000
背景色
overlayOpacity
0.8
背景色透明度
fixedNavigation
false
是否始终显示上一张、下一张按钮
imageLoading
images/lightbox-ico-loading.gif
加载图片时显示的图片
imageBtnPrev
images/lightbox-btn-prev.gif
上一张按钮的图片
imageBtnNext
images/lightbox-btn-next.gif
下一张按钮的图片
imageBtnClose
images/lightbox-btn-close.gif
关闭按钮的图片
imageBlank
images/lightbox-blank.gif
上一张、下一张按钮周围空白部分的图片（默认透明）
containerBorderSize
10
展示图片的边框宽度
containerResizeSpeed
400
展示过程切换的速度
txtImage
Image
页码辅助文字
txtOf
of
页码辅助文字
keyToClose
c
关闭展示的快捷键
keyToPrev
p
上一张的快捷键
keyToNext
n
下一张的快捷键
值得注意的地方是
imageLoading
‘images/lightbox-ico-loading.gif’
加载图片时显示的图片
imageBtnPrev
‘images/lightbox-btn-prev.gif’
上一张按钮的图片
imageBtnNext
‘images/lightbox-btn-next.gif’
下一张按钮的图片
imageBtnClose
‘images/lightbox-btn-close.gif’
关闭按钮的图片
这几张张图片，我们如果不定义，则会使用 JS 中默认的定义路径 在 jquery.notesforlightbox.js 中，如下程序便实现了上一张图片和下一张图片等按钮的定义
1 2 3 4 5 6 7 8 9
imageLoading: 'images/loading.gif' ,imageBtnPrev: 'images/prev.png' ,imageBtnNext: 'images/next.png' ,imageBtnClose: 'images/close.png' ,imageBlank: 'images/lightbox-blank.gif' ,imageBtnBottomPrev: 'images/btm_prev.gif' ,imageBtnBottomNext: 'images/btm_next.gif' ,imageBtnPlay: 'images/start.png' ,imageBtnStop: 'images/pause.png' ,
所以，如果发现图片不正常显示可以检查一下这里的路径设置问题
代码下载
源码下载 代码已部署在 GitHub，可以下载查看
总结
通过这个插件我们可以方便地实现图片的加载预览，效果也比较酷炫，希望对大家有帮助！
