HTML - LightGallery 使用方法

作品集网页。记录一波供自己查阅。

---

一、最简方法：参照模板调用LightGallery

1. HTML主体框架

参考Github代码即可，其框架如下：

https://github.com/sachinchoolur/lightGallery

<div class="demo-gallery">
            <ul id="lightgallery" class="list-unstyled row">
                <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/1-375.jpg 375, img/1-480.jpg 480, img/1.jpg 800" data-src="img/1-1600.jpg" data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>">
                    <a href="">
                        <img class="img-responsive" src="img/thumb-1.jpg">
                    </a>
                </li>
                <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/2-375.jpg 375, img/2-480.jpg 480, img/2.jpg 800" data-src="img/2-1600.jpg" data-sub-html="<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>">
                    <a href="">
                        <img class="img-responsive" src="img/thumb-2.jpg">
                    </a>
                </li>
                <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/13-375.jpg 375, img/13-480.jpg 480, img/13.jpg 800" data-src="img/13-1600.jpg" data-sub-html="<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>">
                    <a href="">
                        <img class="img-responsive" src="img/thumb-13.jpg">
                    </a>
                </li>
                <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/4-375.jpg 375, img/4-480.jpg 480, img/4.jpg 800" data-src="img/4-1600.jpg" data-sub-html="<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>">
                    <a href="">
                        <img class="img-responsive" src="img/thumb-4.jpg">
                    </a>
                </li>
            </ul>
        </div>

2. 通过CSS定义demo-gallery：

<link href="../dist/css/lightgallery.css" rel="stylesheet">
<style type="text/css">
            body{
                background-color: #152836
            }
            .demo-gallery > ul {
              margin-bottom: 0;
            }
            .demo-gallery > ul > li {
                float: left;
                margin-bottom: 15px;
                margin-right: 20px;
                width: 200px;
            }
            .demo-gallery > ul > li a {
              border: 3px solid #FFF;
              border-radius: 3px;
              display: block;
              overflow: hidden;
              position: relative;
              float: left;
            }
            .demo-gallery > ul > li a > img {
              -webkit-transition: -webkit-transform 0.15s ease 0s;
              -moz-transition: -moz-transform 0.15s ease 0s;
              -o-transition: -o-transform 0.15s ease 0s;
              transition: transform 0.15s ease 0s;
              -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
              height: 100%;
              width: 100%;
            }
            .demo-gallery > ul > li a:hover > img {
              -webkit-transform: scale3d(1.1, 1.1, 1.1);
              transform: scale3d(1.1, 1.1, 1.1);
            }
            .demo-gallery > ul > li a:hover .demo-gallery-poster > img {
              opacity: 1;
            }
            .demo-gallery > ul > li a .demo-gallery-poster {
              background-color: rgba(0, 0, 0, 0.1);
              bottom: 0;
              left: 0;
              position: absolute;
              right: 0;
              top: 0;
              -webkit-transition: background-color 0.15s ease 0s;
              -o-transition: background-color 0.15s ease 0s;
              transition: background-color 0.15s ease 0s;
            }
            .demo-gallery > ul > li a .demo-gallery-poster > img {
              left: 50%;
              margin-left: -10px;
              margin-top: -10px;
              opacity: 0;
              position: absolute;
              top: 50%;
              -webkit-transition: opacity 0.3s ease 0s;
              -o-transition: opacity 0.3s ease 0s;
              transition: opacity 0.3s ease 0s;
            }
            .demo-gallery > ul > li a:hover .demo-gallery-poster {
              background-color: rgba(0, 0, 0, 0.5);
            }
            .demo-gallery .justified-gallery > a > img {
              -webkit-transition: -webkit-transform 0.15s ease 0s;
              -moz-transition: -moz-transform 0.15s ease 0s;
              -o-transition: -o-transform 0.15s ease 0s;
              transition: transform 0.15s ease 0s;
              -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
              height: 100%;
              width: 100%;
            }
            .demo-gallery .justified-gallery > a:hover > img {
              -webkit-transform: scale3d(1.1, 1.1, 1.1);
              transform: scale3d(1.1, 1.1, 1.1);
            }
            .demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img {
              opacity: 1;
            }
            .demo-gallery .justified-gallery > a .demo-gallery-poster {
              background-color: rgba(0, 0, 0, 0.1);
              bottom: 0;
              left: 0;
              position: absolute;
              right: 0;
              top: 0;
              -webkit-transition: background-color 0.15s ease 0s;
              -o-transition: background-color 0.15s ease 0s;
              transition: background-color 0.15s ease 0s;
            }
            .demo-gallery .justified-gallery > a .demo-gallery-poster > img {
              left: 50%;
              margin-left: -10px;
              margin-top: -10px;
              opacity: 0;
              position: absolute;
              top: 50%;
              -webkit-transition: opacity 0.3s ease 0s;
              -o-transition: opacity 0.3s ease 0s;
              transition: opacity 0.3s ease 0s;
            }
            .demo-gallery .justified-gallery > a:hover .demo-gallery-poster {
              background-color: rgba(0, 0, 0, 0.5);
            }
            .demo-gallery .video .demo-gallery-poster img {
              height: 48px;
              margin-left: -24px;
              margin-top: -24px;
              opacity: 0.8;
              width: 48px;
            }
            .demo-gallery.dark > ul > li a {
              border: 3px solid #04070a;
            }
            .home .demo-gallery {
              padding-bottom: 80px;
            }
        </style>

3. 库文件：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>
<script src="../dist/js/lightgallery-all.min.js"></script>
<script src="../lib/jquery.mousewheel.min.js"></script>

4. LightGallery的初始化：

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

## 这个模板将直接在主页上显示4张图片，点击任意一张图片都会打开画廊，显示该图的大图，但画廊只有一个，即：4张图片共享同一个画廊。

## 追加需求1：点击每个图片都会打开不同的画廊，显示不同的一组细节图。

## 追加需求2：点击的不是一个单纯的图片而是一个打包的元素，包含图片、文字、色块等。

二、重写别人的模板调用LightGallery

1. 需求1：

Google一番后找到了我所需要的：https://stackoverflow.com/questions/32377080/multiple-galleries-in-lightgallery-hash-plugin

通过给标签添加分类的属性，再赋予其不同的galleryId即可：

这个操作需要hash属性为true，但hash缺省即为true，所以无需定义。

<div id="dogs">
    <a ...>
        <img ...>
    </a>
</div>
...

<script>
$(document).ready(function() {
    $("#cats").lightGallery({
        galleryId: 1,
        ... 
    });
    $("#dogs").lightGallery({
        galleryId: 2,
        ...
    });  
});
</script>

由于我找到的模板当中，对lightGallery的初始化写在main.js的文件里：

我需要在里面直接更改其初始化的参数，而不能在.html文件里重新写一个初始化，这样做是无效的。

2. 需求2：

为了将所述的图片、文字、色块等打包在一起，我需要用一个<div class="item-wrap">标签将其容纳在内 ，最外层则有一个总的<div class="folio-wrap">将多个<item-wrap>包含在内。

main.js中的初始化如下：

var ssLightGallery = function() {

		$('#folio-wrap').lightGallery({  
			showThumbByDefault: false,
			hash: true,
			selector: ".item-wrap"		,
			galleryId: 1
		});

		$('#folio-wrap2').lightGallery({  
			showThumbByDefault: false,
			hash: true,
			selector: ".item-wrap2"		,
			galleryId: 2
		});
        
        ...
}；

而home.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>