帮助在灯箱的同一页上为多个链接制作单独的图片库

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的灯箱插件六次：

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

另一种选择是只具有一个DIV和每个图像有一个相对标记属性将它们分组到画廊：

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