帮助为灯箱中同一页面上的多个链接创建单独的画廊

Question

我正在尝试从灯箱中的链接打开图像库，我已经掌握了基础知识，并且我有一个可以打开图像库的链接，但我想在页面上打开 6 个不同的链接每一张都有不同的图像库，当我设置它时，它不显示图库，只显示一张图像。有没有办法复制这个：

HTML

 <div id='gallery'>
        <a href="images/big-image1.jpg">
            <img src="images/thumbnail-image1.jpg"/>
        </a>
        <a href="images/big-image2.jpg" ></a>
        <a href="images/big-image3.jpg" ></a>
        <a href="images/big-image4.jpg" ></a>
    </div>

JS

$(document).ready(function() {
    $('#gallery a').lightBox();
});

每个设置的 ，并让它们工作？我需要为它们分配不同的 div 名称才能使它们工作吗？

谢谢，杰西卡

Answer 1

如果您有六个不同的 div，则必须调用 jQuery Lightbox 插件六次：

$(document).ready(function() {
  $('#gallery1 a').lightBox();
  $('#gallery2 a').lightBox();
  $('#gallery3 a').lightBox();
  $('#gallery4 a').lightBox();
  $('#gallery5 a').lightBox();
  $('#gallery6 a').lightBox();
});

另一种选择是只有一个 div，并且每个图像都有一个 rel 标记属性以将它们分组到画廊中：

HTML

<div id="gallery">

 <!-- gallery 1 -->
 <a href="full-image-1.jpg" rel="group1"><img src="thumb-1.jpg"></a>
 <a href="full-image-2.jpg" rel="group1"><img src="thumb-2.jpg"></a>
 <a href="full-image-3.jpg" rel="group1"><img src="thumb-3.jpg"></a>

 <!-- gallery 2 -->
 <a href="full-image-4.jpg" rel="group2"><img src="thumb-4.jpg"></a>
 <a href="full-image-5.jpg" rel="group2"><img src="thumb-5.jpg"></a>
 <a href="full-image-6.jpg" rel="group2"><img src="thumb-6.jpg"></a>

 <!-- gallery 3 -->
 <a href="full-image-7.jpg" rel="group3"><img src="thumb-7.jpg"></a>
 <a href="full-image-8.jpg" rel="group3"><img src="thumb-8.jpg"></a>
 <a href="full-image-9.jpg" rel="group3"><img src="thumb-9.jpg"></a>

 <!-- etc -->

</div>

然后使用此脚本（您仍然需要运行六次）：

$("#gallery a[rel=group1]").lightBox();
$("#gallery a[rel=group2]").lightBox();
$("#gallery a[rel=group3]").lightBox();
// etc