使用jQuery更改圖像並將主圖像移至縮略圖

Question

現在我單擊縮略圖（link_to_thumbnail1.jpg），而較大圖像（link_to_big_image1.jpg）顯示內部div，其編號爲#imageWrap。

如何更改jquery裏面的div #imageWrap當前圖像與縮略圖？

例子：我點擊縮略圖1（link_to_thumbnail1.jpg），並在#imageWrap（Link_to_main_image0.jpg）改變當前圖像縮略圖1，依此類推......

我希望有一個解決這個問題的方法。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.thumbnail').live("click", function() { 
      $('#mainImage').hide(); 
      $('#imageWrap').css('background-image', "url('/ajax-loader.gif')"); 
      var i = $('<img />').attr('src',this.href).load(function() { 
       $('#mainImage').attr('src', i.attr('src')); 
       $('#imageWrap').css('background-image', 'none'); 
       $('#mainImage').fadeIn(); 
      }); 
      return false; 
     }); 
    }); 
</script> 

<div class="Image" id="imageWrap">  
    <img src="Link_to_main_image0.jpg" alt="" title="" id="mainImage" />  
</div> 

<a href="link_to_thumbnail1.jpg" class="thumbnail"> 
    <img src="link_to_big_image1.jpg" alt="" title="" /> 
</a> 

<a href="link_to_thumbnail2.jpg" class="thumbnail"> 
    <img src="link_to_big_image2.jpg" alt="" title="" />  
</a> 

<a href="link_to_thumbnail3.jpg" class="thumbnail"> 
    <img src="link_to_big_image3.jpg" alt="" title="" /> 
</a> 

Answer 1

我對你想達到的目標有些困惑。但是，如果你有一個<div class="imageWrapper"></div>，你要它包含別的東西，你可以使用.html()功能，像這樣：

$('.imageWrapper').html('<img src="whatever_i_need_to_be_here_now.jpg" />'); 

Answer 2

是不是你在找什麼？ ：

http://jsbin.com/avofoj/1/edit

$(document).ready(function(){ 
    $('.thumbnail').click(function(){ 
    $('#imageWrap img').empty(); 
    $('#imageWrap img').attr('src',$(this).attr('src')); 
    }); 
});