幫助在燈箱的同一頁上爲多個鏈接製作單獨的圖片庫

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