Javascript JQuery LightBox插件无法处理多个以图像作为库链接的库
我试图让LightBox JQuery插件在同一HTML页面上与多个库一起工作。我在这篇文章中尝试了解决这个问题的方法: 但却无法让它发挥作用 我的脚本看起来像:Javascript JQuery LightBox插件无法处理多个以图像作为库链接的库,javascript,jquery,html,lightbox,Javascript,Jquery,Html,Lightbox,我试图让LightBox JQuery插件在同一HTML页面上与多个库一起工作。我在这篇文章中尝试了解决这个问题的方法: 但却无法让它发挥作用 我的脚本看起来像: <script type="text/javascript"> $(function(){ $('.lightboxGallery').each(function(){ $('.lightbox', this).lightbox(); }); }); </script> &l
<script type="text/javascript">
$(function(){
$('.lightboxGallery').each(function(){
$('.lightbox', this).lightbox();
});
});
</script>
<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>
$(函数(){
$('.lightboxGallery')。每个(函数(){
$('.lightbox',this.lightbox();
});
});
我的HTML看起来像:
<script type="text/javascript">
$(function(){
$('.lightboxGallery').each(function(){
$('.lightbox', this).lightbox();
});
});
</script>
<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。如果我要为gallery 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>
我点击了应该显示gallery 1中图像的图像,它会显示image10.jpg,然后是gallery 3中的图像:image11,image12,image13,image14,image15
这就像脚本创建另一个lightbox时,之前的lightbox会被覆盖或删除?有人知道如何解决这个问题吗?您必须在脚本标签中为每个库定义多个单独命名的脚本。不能在多个库中使用相同名称