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

我正在尝试从lightbox中的链接打开一个图像库，我有基本知识，我有一个链接可以打开一个图像库，但是我在页面上有6个不同的链接，我想为每个链接打开一个不同的图像库，当我设置它时，它不会显示图像库，只有一个图像。有没有办法复制这个：

HTML

对于每个设置，是否让它们工作？我是否需要为它们指定不同的div名称以使其工作

---

谢谢，Jessica

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

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

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

另一种选择是只使用一个div，每个图像都有一个rel tag属性，以便将它们分组到库中：

HTML

---

嗨，你问的我不太清楚。是否希望“#图库”内的链接打开不同的图库？他们从哪里得到画廊的图片列表？或者你有6个不同的div，每个div都应该打开一个新的图库？我有6个不同的div，每个div都应该打开一个新的图库，我拿出缩略图并添加了一个文本链接来激活lightbox。上面的例子是我在这个论坛上找到的，对我来说很有用，但是只有一个div和5个图片，当我尝试将它复制到下一个div时，它只显示第一个图片，其他什么都没有…这更有意义吗？

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

<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