Jquery lightbox image gallery on a seperate thumbnail click

Question

I am trying to invoke a jquery lightbox gallery on a thumbnail click. But it does not work.

Here is the html code -

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

I've wriiten a Jquery code to invoke the gallery-

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

But it does not help me. The JS and CSS files for Jquery lightbox plugin also included.

Is there any solution to invoke the lightbox gallery on a seperate thumbnail click? Please help me.

Answer 1

Make sure that you are only including jQuery/jQuery Lightbox:

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

Make sure you have the CSS (and make sure media="screen" is there):

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

Also, the code you are using for starting the lightbox is not needed - no need to reference the link you clicked on to start lightbox on something else.

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

Also, since lightbox loads its image from the URL located in the href attribute of the a tag that lightBox() is called on (and not from the image tag inside the link), you can remove all of the image tags within #gallery a which will save you from initially loading a bunch of giant images.