Приветствую.
Есть мини фото галерея, работает с применением библиотеки jQuery.
html:
<div id='bigfoto'><img src='http//..большая картинка..'></div>
<ul id='smallfoto'>
<li><a href='http..большая картинка..'><img src='http//..маленькая..'></a></li>
<li><a href='http..большая картинка..'><img src='http//..маленькая..'></a></li>
<li><a href='http..большая картинка..'><img src='http//..маленькая..'></a></li>
</ul>
При клики на превьюшки в блоке #smallfoto в блоке #bigfoto открывается большая картинка
Как сделать чтобы при клике по большой картинке также была смена на большую картинку следующую по списку, по достижению последней переключалась на первую и так по кругу?
вот пока такое решение:
$('#bigfoto img').click(function() {
var countImg = $('#smallfoto li a').length;
if (countImg > 1) {
if ($('#smallfoto li a').attr('href') == $(this).attr('src')) {
$(this).hide().attr('src',$('#smallfoto li a').parent('li').next().find('a').attr('href'));
$(this).load(function() {
$(this).fadeIn(1000);
});
}
}
imgSmall.fadeTo(500,1);
});
это не работает так как нужно, меняется только на вторую по списку и переключения дальше нет