简介

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

完全响应式设计。

内置插件的模块化体系结构。

支持移动触摸设备。

桌面设备中可以通过鼠标拖拽来切换。

鼠标双击可以查看原尺寸的大图。

缩略图带动画特效。

支持各种视频。

支持20多种硬件加速的CSS3过渡动画。

支持动态加载模式。

支持全屏模式。

支持图片的缩放。

支持HTML5 history API。

响应式图片。

支持HTML iframe。

同一个页面支持多个实例。

智能加载图片及代码优化。

桌面设备支持键盘导航。

支持字体图标。

使用

1.  引入文件

lightgallery.min.css
lightgallery-all.min.js

2.  HTML

<div class="item frontend col-md-3 col-xs-6 ">
                    <div class="item-inner">
                        <!-- Project #1 
                        ==============================================================================================-->
                        <div id="folio-wrap" class="bricks-wrapper">
                            <div class="brick folio-item">
                                <!-- Pro#1 -- Detail 01 
                                ==============================================================================================-->
                                <div class="item-wrap" data-src="assets/images/portfolio/gallery/pro1-1.jpg"  data-sub-html="#01">
                                    <a href="#" class="overlay">
                                        <figure class="figure">
                                            <!-- Pro#1 -- Raw Pic 
                                            ==============================================================================================-->
                                            <img class="img-responsive" src="assets/images/portfolio/portfolio-1.jpg" alt="" />
                                        </figure>                                       
                                    </a>
                                    <a href="https://www.behance.net/" class='details-link' title="details">
                                        <i class="icon-UpRightArrow"></i>
                                    </a>
                                </div> <!-- end item-wrap -->
                                
<!--
                                <div id="01" class='hide'>
                                     Pro#1 -- Detail Description 01
                                    ==============================================================================================
                                    <h4>Salad</h4>
                                    <p>Lorem ipsum Dolor deserunt labore sint officia. Magna et aute enim proident tempor sunt quis nulla voluptate fugiat velit. <a href="www.behance.net">Details</a></p>
                                </div>
-->
                            </div>
                            <div class="brick folio-item">
                                <!-- Pro#1 -- Detail 02
                                ==============================================================================================-->
                                <div class="item-wrap" data-src="assets/images/portfolio/gallery/pro1-2.jpg"  data-sub-html="#02">
                                </div> <!-- end item-wrap -->
 
                            </div>
...
</div>

3. 调用

初始化：

<script type="text/javascript">
        $(document).ready(function(){
            $('#lightgallery').lightGallery();
        });
</script>

## 这个模板将直接在主页上显示4张图片，点击任意一张图片都会打开画廊，显示该图的大图，但画廊只有一个，即：4张图片共享同一个画廊。
## 追加需求1：点击每个图片都会打开不同的画廊，显示不同的一组细节图。
## 追加需求2：点击的不是一个单纯的图片而是一个打包的元素，包含图片、文字、色块等。

相关链接

官网地址：https://www.lightgalleryjs.com/

GitHub 地址 ：https://github.com/sachinchoolur/lightGallery