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> 

我wriiten一個jQuery代碼來調用gallery-

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

但它並不能幫助我。 Jquery lightbox插件的JS和CSS文件也包含在內。

有沒有解決方案可以在單獨的縮略圖上點擊調用燈箱庫？ 請幫幫我。

Answer 1

確保你只包括jQuery的/ jQuery的燈箱：

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

確保您有CSS（並確保媒體= 「屏幕」 是存在的）：

<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內的標籤可以讓您免去最初加載一堆巨型圖像的麻煩。