Question

I recently got some help on here from SLaks (thank you) on the behavior of my custom gallery. I’m now trying to fix the way the thumbnails function. I’ve been toying with it for about an hour but I can’t get it to work. Live version of the code: http://www.studioimbrue.com . Currently the code is as follows:

$('.thumbscontainer ul li a').click(function() {
var li_index = $(this).parents('ul').children('li').index($(this).parent("li"));

    $(this).parents('.thumbscontainer').parent().find('.captions ul li').fadeOut();
 $(this).parents('.thumbscontainer').parent().find('.captions ul li:eq('+li_index+')').fadeIn();
});

$('.container .captions li').click(function() {
    var nextLi = $(this).fadeOut().next().fadeIn();

    if (nextLi.length === 0)  //If we're the last one,
        nextLi = $(this).siblings(':first-child').fadeIn();
});

The only problem is that when the gallery image is clicked, it goes to the next image in the series, yet the thumbnails do not change to the next one in the list. You can take a look at my previous question to see our discussion. Thanks

Answer 1

Like this:

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

nextThumb
        .addClass(clickedClass).fadeTo(1, activeOpacity)
    .siblings()
        .fadeTo(1, inactiveOpacity).removeClass(clickedClass);

This must be in the same block as

var activeOpacity   = 1.0,
    inactiveOpacity = 0.6,
    fadeTime = 100,
    clickedClass = "selected",