带有单独 div 中图像的 Lightgallery
Lightgallery with images in separate divs
我有多个图像排成一排,我希望 Lightgallery 捕获我页面上的所有图像。我似乎只能为每一行获得单独的灯光画廊,而不是一个大画廊。出现问题是因为我在 div 中有一组图像,在一个大容器中有多个 div。如何将 retreats-image-container 中的所有图像 merge/join/combine 放入一个画廊?
<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();
});
使用 select 或 属性 select #retreats-image_container
内的所有 a
标签
$(document).ready(function() {
$("#retreats-image_container").lightGallery({
selector: 'a'
});
});
您可以查看支持的标记列表 here。
我有多个图像排成一排,我希望 Lightgallery 捕获我页面上的所有图像。我似乎只能为每一行获得单独的灯光画廊,而不是一个大画廊。出现问题是因为我在 div 中有一组图像,在一个大容器中有多个 div。如何将 retreats-image-container 中的所有图像 merge/join/combine 放入一个画廊?
<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();
});
使用 select 或 属性 select #retreats-image_container
a
标签
$(document).ready(function() {
$("#retreats-image_container").lightGallery({
selector: 'a'
});
});
您可以查看支持的标记列表 here。