Custom jQuery Gallery Thumbnail Behavior
I recently got some help on here from SLaks (thank you) on the behavior of my custom galler开发者_开发技巧y. 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
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",
精彩评论