Как переключать изображения с помощью jquery?

Question

У меня есть простая установка с одним большим контейнером изображений и 3 меньшими контейнерами с миниатюрами.

Теперь, когда я нажимаю на миниатюру, я хочу переключить большое изображение и маленькое миниатюрное изображение, чтобы в контейнере большого изображения теперь находилось миниатюра большего размера, а в контейнере миниатюр отображается миниатюрное изображение предыдущего большого изображения.

    <div class="thumbnailFloat">
    <img src="data/img_2.jpg" width="60" >
    <img src="data/img_3.jpg" width="60" >
    <img src="data/img_4.jpg" width="60" >
</div>

<div class="imageFloat">
    <img src="data/img_1.jpg" width="180" height="250">
</div>

Спасибо за помощь.

Answer 1

Попробуйте этот непроверенный пример:

Я предлагаю вам использовать идентификатор для большого изображения.

<div class="thumbnailFloat">
    <img src="data/img_2.jpg" width="60" >
    <img src="data/img_3.jpg" width="60" >
    <img src="data/img_4.jpg" width="60" >
</div>

<div class="imageFloat">
    <img id="bigImage" src="data/img_1.jpg" width="180" height="250">
</div>

---

$( function() {
   $( '.thumbnailFloat img' ).click( function() {
       var oldSource = $( '#bigImage' ).attr( 'src' );
       var newSource = $( this ).attr( 'src' );
       $( this ).attr( 'src', oldSource );
       $( '#bigImage' ).attr( 'src', newSource );
   });
});

Answer 2

$(function() {
    $("div.thumbnailFloat img").click(function() {

       var thumbElement = $(this);
       var imageElement = $("div.imageFloat img");

       // Capture the src of the thumbnail we clicked.
       var thumbSrc = thumbElement.attr('src');
       var imageSrc = imageElement.attr('src');

       // and now swap  the image src attributes 
       imageElement.attr('src', thumbSrc);
       thumbElement.attr('src', imageSrc);

    }
});

Если вы делаете это в рабочей среде, вам, вероятно, также понадобятся оптимизированные уменьшенные и полноразмерные версии ваших изображений в отдельных папках, и в этом случае вам потребуется изменить атрибуты SRC примерно так:

var thumbSrc = thumbElement.attr('src').replace('/thumbs/', '/images/');