Question

我正在尝试使用LightBox JQuery插件在同一个HTML页面上使用多个图库。我已经从这篇文章中尝试过这个问题的解决方案：

Making JQuery LightBox Plugin work with multiple galleries

但未能让它发挥作用。

我的脚本如下：

<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

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

JQuery LightBox插件不能与多个图库一起使用图像作为图库链接

1 个答案: