Переключение картинок

[Shugich]

Ни у кого случаем не завалялся скрипт переключения картинок.

Как должно работать:

Есть превьюшки, есть большая картинка. Превьюшка большой картинки выделена. При клике на другую превьюшку большая картинка меняется.

Пример на Яндекс.Маркете. Сначала увеличьте картинку, а дальше будет переключалка.

Уже весь Яндекс облазил ничего не могу найти

[Great Rash]

http://lmgtfy.com/?q=javascript+image+gallery

[Shugich]

В общем в интернете ничего по этому поводу нет адекватного. А сейчас будет, ловите, может кому пригодиться:

<img class="smallPhoto active" rel="./pictures/bigPhoto1.png" src="./pictures/smallPhoto1.png"/>
<img class="smallPhoto" rel="./pictures/bigPhoto2.png" src="./pictures/smallPhoto2.png"/>
<img class="smallPhoto" rel="./pictures/bigPhoto3.png" src="./pictures/smallPhoto3.png"/>

<img class="bigPhoto" src="./pictures/bigPhoto1.png" />

<script type="text/javascript">
$('.smallPhoto').click(function(){
$('.bigPhoto').attr('src', $(this).attr('rel'));
$('.smallPhoto.active').removeClass('active');
$(this).addClass('active');
});
</script>

[Golgi]

...

Edited August 5, 2011 by Golgi

[ruslan.savenok]

В общем в интернете ничего по этому поводу нет адекватного.

Плохо значит ищите, мне вариант с rel не очень нравится т.к. вы не сможете нормально прикрутить к этому анимации переключения, что может в данном варианте не нужно.

Я бы делал так

<!-- Валидность не соблюдаю -->

<style>
 .big li {display: none;}
 .big li.first {display: block;}
</style>

<script>
$(document).ready(function() {
  $('.thumb li').each(function(i) {
    $(this).click(function () {
     $('.big li').hide().eq(i).fadeIn();
    });
  });
});
</script>

<ul class="big">
 <li class="first"><img src="im_1.jpg" alt="" /></li>
 <li><img src="im_2.jpg" alt="" /></li>
 <li><img src="im_3.jpg" alt="" /></li>
</ul>

<ul class="thumb">
 <li><img src="im_1_s.jpg" alt="" /></li>
 <li><img src="im_2_s.jpg" alt="" /></li>
 <li><img src="im_3_s.jpg" alt="" /></li>
</ul>