如何使用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> 

感謝您的幫助。您使用的ID爲大圖像

我建議：

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