简介

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

完全响应式设计。

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

支持移动触摸设备。

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

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

缩略图带动画特效。

支持各种视频。

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

支持动态加载模式。

支持全屏模式。

支持图片的缩放。

支持HTML5 history API。

响应式图片。

支持HTML iframe。

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

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

桌面设备支持键盘导航。

支持字体图标。

使用

1.  引入文件

lightgallery.min.csslightgallery-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