HTML - LightGallery 使用方法

最新推荐文章于 2024-05-15 09:58:36 发布

置顶

frostace07

最新推荐文章于 2024-05-15 09:58:36 发布

阅读量5.7k

点赞数

分类专栏： HTML LightGallery 文章标签： HTML LightGallery

本文链接：https://blog.csdn.net/HcyJerry007/article/details/83019351

版权

这篇博客介绍了如何使用LightGallery创建多个独立的画廊，并实现每个画廊展示不同细节图的功能。同时，讲解了如何将图片、文字和色块等元素打包在一个<div>内，通过修改main.js中LightGallery的初始化参数来实现所需效果。

摘要由CSDN通过智能技术生成

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

一、最简方法：参照模板调用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><