带有单独div中图像的Lightgallery [英] Lightgallery with images in separate divs
问题描述
我有多行图像,并且我希望 Lightgallery 捕获页面上的所有图像.我似乎只能为每一行获得单独的灯光画廊,而不是一个大型画廊.发生问题是因为我在div内有几组图像,并且在一个大容器中有多个div.如何获取撤退图像容器中的所有图像以将它们合并/合并/合并到一个画廊中?
I have multiple images in rows and I want Lightgallery to capture all the images on my page. I can only seem to get separate light galleries for each row instead of one big gallery. The problem occurs because I have sets of images inside divs, with multiple divs in one big container. How can I get all the images in retreats-image-container to merge/join/combine into one gallery?
<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:
The javascript:
这将创建2个画廊的4张图片
This creates 2 galleries of 4 images
$(document).ready(function() {
$(".row").lightGallery();
});
这是行不通的,但这实际上是我想要获得一张包含8张图片的画廊的方法
This doesn't work, but it's essentially what I want to do to get one gallery of 8 images
$(document).ready(function() {
$("#retreats-image_container").lightGallery();
});
推荐答案
使用选择器属性选择#retreats-image_container
$(document).ready(function() {
$("#retreats-image_container").lightGallery({
selector: 'a'
});
});
您可以在此处查看支持的标记的列表.
You can check list of supported markups here.
这篇关于带有单独div中图像的Lightgallery的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!