Question

Active site can be seen here: http://www.studioimbrue.com/index2.php

There are currently two small problems with the coding. First: when the page loads and you attempt to click on one of the large images to advance, nothing happens. Once a thumbnail is clicked, the click functionality of the large image comes available. I’m trying to fix it so when the page loads, the user can just start clicking the large image.

Second: when an image is clicked, the thumbnail highlight changes. The only problem there is once it gets past 4, the “current” thumbnail needs to be seen, thus the carousel should go to that one. Right now the code for that is nextThumb.closest('.thumbscontainer').jcarousel('next'); but that makes it scroll every time you click. Thanks for any help

Answer 1

You put the $('.container .captions li').click(...) code inside the thumbnails’ click handler, so the click event for the full image is only added after the first thumbnail is clicked.

You should put that block (including its closing });) outside the other click handler.

Also, you should change

var nextThumb = nextLi
    .closest('.thumbscontainer')
    .find('.thumbscontainer li:eq(' + nextLi.index() + ')');

to .closest('.container').