0

我正在尝试在单击缩略图时调用 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 文件也包括在内。

是否有任何解决方案可以在单独的缩略图单击时调用灯箱库？请帮我。

4

1 回答 1

0

确保您只包含 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()调用的 a 标签的 href 属性中的 URL 加载其图像（而不是从链接内的图像标签），因此您可以删除所有图像标签，#gallery a这些标签将节省您最初的时间加载一堆巨大的图像。

于 2013-01-09T21:59:09.837 回答