Пользовательская галерея jQuery Thumbnail Behavior

Question

Недавно я получил некоторую помощь от SLaks (спасибо) за поведение моей собственной галереи. Теперь я пытаюсь решить, как работают миниатюры. Я занимался этим около часа, но я не могу заставить его работать. Живая версия кода: http://www.studioimbrue.com. В настоящее время код выглядит следующим образом:

$('.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(); 
}); 

Единственная проблема заключается в том, что когда галерея изображение щелкнул, она переходит к следующему изображению в серии, но эскизы не меняют к следующему в списке. Вы можете взглянуть на мой предыдущий вопрос, чтобы посмотреть наше обсуждение. Благодаря

Answer 1

Как это:

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

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

Это должно быть в том же блоке

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