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然后显示图库 2 中的图像：图像 5、图像 6、图像 7、图像 8、图像 9。如果我为图库 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然后是图库 3 中的图像：image11、image12、image13、image14、image15。

这就像脚本创建了另一个灯箱时，它之前的灯箱被覆盖或删除？有谁知道如何解决这个问题？

Answer 1

您必须为每个图库定义多个在脚本标记中单独命名的脚本。不能在多个库中使用同名