JQuery LightBox插件不適用於以畫廊為鏈接的多個畫廊

Question

我正在嘗試讓LightBox JQuery插件與同一HTML頁面上的多個畫廊一起使用。 我已經嘗試過這篇文章中針對此問題的解決方案：

使JQuery LightBox插件可與多個畫廊一起使用

但無法使其正常工作。

我的腳本看起來像：

<script type="text/javascript">
$(function(){
    $('.lightboxGallery').each(function(){
        $('.lightbox', this).lightbox();
    });
});
</script>

我的HTML看起來像：

<div id="gallery1" class="lightboxGallery">
    <a href="images/gallery/image1.jpg" class="lightbox"><img style="border:3px solid silver;" src="images/image10.jpg"></a>
    <a href="images/gallery/image2.jpg" class="lightbox"></a>
    <a href="images/gallery/image3.jpg" class="lightbox"></a>
    <a href="images/gallery/image4.jpg" class="lightbox"></a>
</div>
<div id="gallery2" class="lightboxGallery">
    <a href="images/gallery/image5.jpg" class="lightbox"><img style="border:3px solid silver;" src="images/pic10.jpg"></a>
    <a href="images/gallery/image6.jpg" class="lightbox"></a>
    <a href="images/gallery/image7.jpg" class="lightbox"></a>
    <a href="images/gallery/image8.jpg" class="lightbox"></a>
    <a href="images/gallery/image9.jpg" class="lightbox"></a>
</div>

運行此命令時，如果我單擊第一個圖像以顯示應該是第一個圖庫的圖像，它將顯示image10.jpg，然后顯示gallery2中的圖像：image5，image6，image7，image8，image9。 如果要為圖庫3添加另一個div：

<div id="gallery3" class="lightboxGallery">
    <a href="images/gallery/image11.jpg" class="lightbox"><img style="border:3px solid silver;" src="images/pic11.jpg"></a>
    <a href="images/gallery/image12.jpg" class="lightbox"></a>
    <a href="images/gallery/image13.jpg" class="lightbox"></a>
    <a href="images/gallery/image14.jpg" class="lightbox"></a>
    <a href="images/gallery/image15.jpg" class="lightbox"></a>
</div>

然后我單擊了應該顯示圖庫1中圖像的圖像，它將顯示image10.jpg，然后顯示gallery3中的圖像：image11，image12，image13，image14，image15。

就像腳本創建另一個燈箱一樣，它之前的燈箱會被覆蓋還是刪除？ 有誰知道如何解決這一問題？

Answer 1

您將必須為每個圖庫定義多個在腳本標記內分別命名的腳本。 具有相同名稱的名稱不能在多個畫廊中使用