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

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

1 个答案: