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()的标签的href属性中的URL加载其图像（而不是从链接内的图像标签）加载，因此您可以删除所有图像#gallery a中的标签可以帮助您免于最初加载一堆巨型图像。

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

1 个答案: