一、简介
lightgallery.js 是一个全功能、轻量级、无依赖的灯箱画廊显示库。
二、主要特性
- 全响应式兼容
- 模块化的架构和内置插件
- 移动设备和触摸支持
- 桌面设备拖拽支持
- 双击查看图像的实际大小
- 动画缩略图
- 社交媒体分享
- YouTube，Vimeo，DailyMotion，VK和 HTML5 视频支持
- 20+ 硬件加速CSS3过渡
- 全屏支持
- 支持缩放
- 浏览器历史记录
- 响应式图像
- HTML iframe 支持
- 支持iFrame框架
- 单页多实例
- 可能过CSS(SCSS)定制样式
- 智能图像预加载与代码优化
- 桌面键盘导航
- 字体图标支持
- 还有更多
三、浏览器支持
lightgallery 支持所有主要的浏览器包括IE 9及以上。
四、安装下载
1. Bower 安装
你可以使用 Bower 包管理工具安装lightgallery：
1
| bower install lightgallery.js --save
|
2. npm
你也能在 npm 上找到 lightgallery：
1
| npm install lightgallery.js
|
3. Github 下载
你也可以直接从 GitHub 下载lightgallery
五、基础示例
1. 使用方法
首先，在 html 头文件<head>中引入lightgallery.css：
1
2
3
| <head>
<link rel="stylesheet" href="css/lightgallery.css">
</head>
|
然后，在<body>标签结尾引入lightgallery.min.js，如果你想引入其他 lightgallery 的功能插件，你可以将这些插件引入到lightgallery.min.js之后，如下：
1
2
3
4
5
6
7
8
9
| <body>
...
<script src="js/lightgallery.min.js"></script>
<script src="js/lg-thumbnail.min.js"></script>
<script src="js/lg-fullscreen.min.js"></script>
</body>
|
以下是页面标记的图片示例：
1
2
3
4
5
6
7
8
9
| <div id="lightgallery">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg">
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg">
</a>
...
</div>
|
最后，是 JavaScript 调用插件的方式：
1
2
3
| <script>
lightGallery(document.getElementById('lightgallery'));
</script>
|
2. 完整示例
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
63
64
65
66
67
68
69
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lightgallery.js的使用示例</title>
<link type="text/css" rel="stylesheet" href="/lightGallery/css/lightgallery.min.css" />
<style type="text/css" rel="stylesheet">
ul {
float: left;
list-style-type: none;
}
ul li {
float: left;
display: inline-block;
margin: 5px;
}
.lgallery {
width: 213px;
height: 137px;
cursor: pointer;
}
</style>
</head>
<body onload="initLoad();">
<ul id="lightGallery">
<li data-src="/assets/images/a.jpg">
<img class="lgallery" src="/assets/images/a.jpg">
</li>
<li data-src="/assets/images/b.jpg">
<img class="lgallery" src="/assets/images/b.jpg">
</li>
<li data-src="/assets/images/c.jpg">
<img class="lgallery" src="/assets/images/c.jpg">
</li>
<li data-src="/assets/images/d.jpg">
<img class="lgallery" src="/assets/images/d.jpg">
</li>
<li data-src="/assets/images/e.jpg">
<img class="lgallery" src="/assets/images/e.jpg">
</li>
<li data-src="/assets/images/f.jpg">
<img class="lgallery" src="/assets/images/f.jpg">
</li>
<li data-src="/assets/images/g.jpg">
<img class="lgallery" src="/assets/images/g.jpg">
</li>
</ul>
<script type="text/javascript" src="/lightGallery/js/lightgallery.min.js"></script>
<script type="text/javascript" src="/lightGallery/js/plugins/lg-fullscreen.min.js"></script>
<script type="text/javascript" src="/lightGallery/js/plugins/lg-thumbnail.min.js"></script>
<script type="text/javascript" src="/lightGallery/js/plugins/lg-autoplay.min.js"></script>
<script type="text/javascript" src="/lightGallery/js/plugins/lg-hash.min.js"></script>
<script type="text/javascript" src="/lightGallery/js/plugins/lg-pager.min.js"></script>
<script type="text/javascript" src="/lightGallery/js/plugins/lg-share.min.js"></script>
<script type="text/javascript" src="/lightGallery/js/plugins/lg-zoom.min.js"></script>
<script type="text/javascript">
function initLoad() {
var lg = document.getElementById('lightGallery');
lightGallery(lg, {
mode: 'lg-slide',
cssEasing: 'ease',
speed: 500
});
}
</script>
</body>
</html>
|
六、学习和参考资源
