综述
我们肯定用过 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，可以下载查看
总结
通过这个插件我们可以方便地实现图片的加载预览，效果也比较酷炫，希望对大家有帮助！
