自定义 jQuery Gallery 缩略图行为

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