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

Question

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

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

<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/');