具有单独 div 中的图像的 Lightgallery

Question

我在行中有多个图像，我希望Lightgallery 捕获我页面上的所有图像。我似乎只能为每一行而不是一个大画廊获得单独的灯光画廊。出现问题是因为我在 div 中有一组图像，在一个大容器中有多个 div。如何将retreats-image-container 中的所有图像合并/加入/合并到一个画廊中？

<div class="container-fluid" id="retreats-image-container">
    <div class="row row-center">
        <a href="img/retreats/retreats1.jpg">
            <div class="col-lg-3 col-sm-12 text-center retreats-img">
                <img src="img/retreats/retreats1.jpg" width="100%" height="100%" title="Special events" alt="Special events">
            </div>
        </a>

        <a href="img/retreats/retreats2.jpg">
            <div class="col-lg-3 col-sm-12 text-center retreats-img">
                <img src="img/retreats/retreats2.jpg" width="100%" height="100%" title="Beauty and makeup" alt="Beauty and makeup">
            </div>
        </a>

        <a href="img/retreats/retreats3.jpg">
            <div class="col-lg-3 col-sm-12 text-center retreats-img">
                <img src="img/retreats/retreats3.jpg" width="100%" height="100%" title="Special events" alt="Special events">
            </div>
        </a>

        <a href="img/retreats/retreats4.jpg">
            <div class="col-lg-3 col-sm-12 text-center retreats-img">
                <img src="img/retreats/retreats4.jpg" width="100%" height="100%" title="Special events" alt="Special events">
            </div>
        </a>
    </div>

    <div class="row row-center">
        <a href="img/retreats/retreats5.jpg">
            <div class="col-lg-3 col-sm-12 text-center retreats-img">
                <img src="img/retreats/retreats5.jpg" width="100%" height="100%"title="Special events" alt="Special events">
            </div>
        </a>

        <a href="img/retreats/retreats6.jpg">
            <div class="col-lg-3 col-sm-12 text-center retreats-img">
                <img src="img/retreats/retreats6.jpg" width="100%" height="100%"  title="Special events" alt="Special events">
            </div>
        </a>

        <a href="img/retreats/retreats7.jpg">
            <div class="col-lg-3 col-sm-12 text-center retreats-img">
                <img src="img/retreats/retreats7.jpg" width="100%" height="100%"  title="Special events" alt="Special events">
            </div>
        </a>

        <a href="img/retreats/retreats8.jpg">
            <div class="col-lg-3 col-sm-12 text-center retreats-img">
                <img src="img/retreats/retreats8.jpg" width="100%" height="100%"  title="Special events" alt="Special events">
            </div>
        </a>
    </div>
</div>

javascript：

这将创建 2 个包含 4 个图像的画廊

$(document).ready(function() {
    $(".row").lightGallery();
});

这行不通，但它本质上是我想要获得一个包含 8 个图像的画廊

$(document).ready(function() {
    $("#retreats-image_container").lightGallery();
});

Answer 1

使用选择器属性选择#retreats-image_container内的所有a标签

$(document).ready(function() {
    $("#retreats-image_container").lightGallery({
        selector: 'a'
    });
});

您可以查看支持的标记列表here。