jQuery灯箱图片库在单独的缩略图上单击

Question

我试图在单击缩略图时调用jquery灯箱画廊。 但这行不通。

这是html代码-

<a class="launchlightbox" href="#"><img src="image_thumb.jpg" alt="" class="small_image"></a>

<div id="gallery">
    <a class="lightboxgallery" href="image1.jpg" id="counter-1"><img src="image1.jpg"></a>
    <a class="lightboxgallery" href="image2.jpg" id="counter-2"><img src="image2.jpg"></a>
    <a class="lightboxgallery" href="image3.jpg" id="counter-3"><img src="image3.jpg"></a>
</div>

我写了一个Jquery代码来调用图库-

$('.launchlightbox').click(function(e){
     e.preventDefault();    
     $(this).next('.lightboxgallery').lightBox();
});

但这对我没有帮助。 还包括Jquery灯箱插件的JS和CSS文件。

有什么解决方案可以通过单独单击缩略图来调用灯箱画廊吗？ 请帮我。

Answer 1

确保只包括jQuery / jQuery Lightbox：

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>

确保您拥有CSS（并确保存在media =“ screen”）：

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />

同样，您不需要用于启动灯箱的代码-无需引用您单击的链接即可在其他地方启动灯箱。

$('a.launchlightbox').click(function(){
    $("a.lightboxgallery").first().lightBox();
    return false;
});

另外，由于lightbox从位于调用lightBox()的标签的href属性中的URL加载其图像（而不是从链接内的image标签） #gallery a图像，因此您可以删除#gallery a所有图像标签这将使您免于最初加载大量巨型图像的麻烦。