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

自定义jQuery Gallery缩略图行为

1 个答案: