Jquery lightbox图片库在单独的缩略图上单击

Question

我正在尝试通过点击缩略图来调用jquery lightbox图库。但它不起作用。

这是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 lightbox插件的JS和CSS文件也包括在内。

有什么解决方案可以在单独的缩略图点击时调用lightbox图库吗？请帮帮我。

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" />

此外，您用来启动lightbox的代码也不是必需的--不需要引用您单击的链接来启动其他东西上的lightbox。

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

此外，由于lightbox从调用lightBox()的标记的href属性中加载图像(而不是从链接内的图像标记)，因此您可以删除#gallery a中的所有图像标记，这将使您不必一开始加载一堆巨大的图像。