Question

I have a gallery of thumbnails that display a larger version when you click them. I want that larger image to appear in lightbox when clicked. On page load, the initial image displayed works fine. But, when I click one of the thumbnails, while it appears as a larger image, lightbox only displays the original image. Am I missing some code, or is this a possible limitation of lightbox?

Go here for example

<a href="/uploads/portfolio/fullsize/bigimage.jpg" id="bigImgLink" rel="lightbox"><img src="/uploads/portfolio/fullsize/bigimage.jpg" alt="" class="fullsize" id="bigImg" /></a>

Snippet of the Javascript

imagearray = new Array('CapitalHealth_01alt_WEB-2225.jpg','CapitalHealth_16_WEB-1311.jpg','CapitalHealth_18retouched_WEB-6133.jpg','CapitalHealth_09_retouched_WEB-6020.jpg','CapitalHealth_13_WEB-8373.jpg');
currentimage = 0;
totalimages= imagearray.length;
        $(".navigation").click(function() {
                            if ( $(this).attr('id') == 'previous-image' ) {
                                currentimage = (currentimage > 0) ? currentimage - 1 : totalimages - 1;
                            } else {
                                currentimage = (currentimage < (totalimages - 1)) ? currentimage + 1 : 0;
                            }

                            $("img#bigImg").attr('src',"/uploads/portfolio/fullsize/" + imagearray[currentimage]);
                            $("a#bigImgLink").attr('href',"/uploads/portfolio/fullsize/" + imagearray[currentimage]);
    });

Answer 1

this never gets called $(".navigation").click(function() { You can debug this using firebug by adding a watch. Just suggesting this in case you didn’t know.

Change this to the correct selector and it will work. Something like $(".thumbnail").click(function() {

Also it might be better to just use a carousel script.

http://www.tripwiremagazine.com/2012/12/jquery-carousel.html

this one is pretty good http://www.agilecarousel.com/flavor_2.htm