lightgallery.js-纯js轻量级响应式lightbox插件

lightgallery.js是一款纯JavaScript轻量级响应式lightbox插件。该Lightbox插件支持图片，视频，iframe等多种媒体。支持全屏，导航，缩放，下载等功能，还支持多种动画过渡效果。lightgallery.js的特点还有：

• 完全响应式设计。
• 内置插件的模块化体系结构。
• 支持移动触摸设备。
• 桌面设备中可以通过鼠标拖拽来切换。
• 鼠标双击可以查看原尺寸的大图。
• 缩略图带动画特效。
• 支持各种视频。
• 支持20多种硬件加速的CSS3过渡动画。
• 支持动态加载模式。
• 支持全屏模式。
• 支持图片的缩放。
• 支持HTML5 history API。
• 响应式图片。
• 支持HTML iframe。
• 同一个页面支持多个实例。
• 智能加载图片及代码优化。
• 桌面设备支持键盘导航。
• 支持字体图标。

安装

可以通过npm和bower来安装lightgallery.js插件。

bower install lightgallery.js --save
npm install lightgallery.js                  
                

使用方法

在页面中引入lightgallery.css和lightgallery.min.js文件。如果你需要某项功能可以单独引入相关文件，如全屏功能引入lg-fullscreen.min.js，缩略图功能引入lg-thumbnail.min.js等。

<link rel="stylesheet" href="css/lightgallery.css">
<script src="js/lightgallery.min.js"></script>
<script src="js/lg-thumbnail.min.js"></script>
<script src="js/lg-fullscreen.min.js"></script>
...                  
                

HTML结构

建议使用下面的HTML结构来构建一个图片画廊。

<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>        
                

你可以查看这里来获取其它HTML结构的使用方法。

初始化插件

在页面底部通过下面的方法来初始化该lightbox插件。

<script>
    lightGallery(document.getElementById('lightgallery'));
</script>       
                

配置参数

核心配置参数

更多的配置参数请参考https://sachinchoolur.github.io/lightgallery.js/docs/api.html

lightgallery.js插件的github地址为https://github.com/sachinchoolur/lightgallery.js