全功能JavaScript灯箱画廊插件lightgallery.js

JavaScript
前端开发
发布日期:  2018-10-06
文章字数:  4003
阅读时长:  13 分

一、简介

lightgallery.js 是一个全功能、轻量级、无依赖的灯箱画廊显示库。

lightgallery

二、主要特性

  • 全响应式兼容
  • 模块化的架构和内置插件
  • 移动设备和触摸支持
  • 桌面设备拖拽支持
  • 双击查看图像的实际大小
  • 动画缩略图
  • 社交媒体分享
  • 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>

    <!-- lightgallery plugins -->
    <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>

六、学习和参考资源

        </div>
        <hr/>

        

<div class="reprint" id="reprint-statement">
    
        <div class="reprint__author">
            <span class="reprint-meta" style="font-weight: bold;">
                <i class="fas fa-user">
                    文章作者:
                </i>
            </span>
            <span class="reprint-info">
                <a href="/" rel="external nofollow noreferrer">blinkfox</a>
            </span>
        </div>
        <div class="reprint__type">
            <span class="reprint-meta" style="font-weight: bold;">
                <i class="fas fa-link">
                    文章链接:
                </i>
            </span>
            <span class="reprint-info">
                <a href="/posts/2018/10/06/qian-duan-kai-fa/javascript/quan-gong-neng-javascript-deng-xiang-hua-lang-cha-jian-lightgallery.js/">/posts/2018/10/06/qian-duan-kai-fa/javascript/quan-gong-neng-javascript-deng-xiang-hua-lang-cha-jian-lightgallery.js/</a>
            </span>
        </div>
        <div class="reprint__notice">
            <span class="reprint-meta" style="font-weight: bold;">
                <i class="fas fa-copyright">
                    版权声明:
                </i>
            </span>
            <span class="reprint-info">
                本博客所有文章除特別声明外，均采用
                <a href="https://creativecommons.org/licenses/by/4.0/deed.zh" rel="external nofollow noreferrer" target="_blank">CC BY 4.0</a>
                许可协议。转载请注明来源
                <a href="/" target="_blank">blinkfox</a>
                !
            </span>
        </div>
    
</div>

<script async defer>
  document.addEventListener("copy", function (e) {
    let toastHTML = '<span>复制成功，请遵循本文的转载规则</span><button class="btn-flat toast-action" onclick="navToReprintStatement()" style="font-size: smaller">查看</a>';
    M.toast({html: toastHTML})
  });

  function navToReprintStatement() {
    $("html, body").animate({scrollTop: $("#reprint-statement").offset().top - 80}, 800);
  }
</script>
本文链接:   /posts/2018/10/06/quan-gong-neng-javascript-deng-xiang-hua-lang-cha-jian-lightgallery.js/
  目录