2013-07-02 47 views
0

我有一個WooCommerce設置,我有一個畫廊。一個是大的形象,另一個是縮略圖。在CLick上替換圖像SRC

我想要做的是當有人點擊縮略圖時,它會替換大圖像,並在縮略圖處顯示大圖像。我怎麼做?任何JavaScript大師在這裏幫助?

這裏是完整的HTML輸出。

<div class="images product-gallery "> 
      <div class="big_image"> 
       <a title="" href="http://www.domain.com/image001.jpg" itemprop="image" class="woocommerce-main-image zoom"><img width="300" height="300" alt="" class="attachment-shop_single wp-post-image" src="http://www.domain.com/image001-300x300.jpg"></a> 
      </div> 

       <div class="thumbnails"> 
        <a title="" class="zoom first" href="http://www.domain.com/image002.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image002-90x90.jpg"><div class="numbers">1</div></a> 
        <a title="" class="zoom" href="http://www.domain.com/image003.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image003-90x90.jpg"><div class="numbers">2</div></a> 
        <a title="" class="zoom last" href="http://www.domain.com/image004.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image004-90x90.jpg"><div class="numbers">3</div></a> 
        <a title="" class="zoom first" href="http://www.domain.com/image005.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image005-90x90.jpg"><div class="numbers">4</div></a> 
       </div> 

      <div class="clear"></div> 
</div> 

我不需要那<a href="部分的形象。所以,你可以忽略它們。
我對JavaScript有很少的知識,所以請幫助我。我想要的只是當有人點擊任何縮略圖圖像時,縮略圖圖像取代了大圖像,而大圖像取代了被點擊的縮略圖。所以基本上是改變立場。

請原諒我的可憐的英語。

回答

2

jQuery的

您可以onclick事件

$("#target").attr("src","newUrlOfTheImg"); 

或用普通Java腳本使用SRC attr()

document.getElementById("target").src="newUrlOfTheImg"; 

And have look once

+0

@Sergio OP用jQuery標記了它。 – Prisoner

+0

確實,刪除了我的評論。 – Sergio

+1

@Baadshah,我看到了:)你有+1 – Sergio

0

document.getElementById("target").src="myNewImage.extension";

純JavaScript替代方案,您可以在onclick事件中使用。

0
$(document).ready(function() { 
$('.zoom').on('click', function() { 
    $('.big_image').find('img').attr('src', $(this).find('img').attr('src')); 
}); 
}); 

你應該嘗試一下,但是最好有單獨的縮略圖和大圖像文件用於加載目的。

+0

謝謝,但是當我實現這個代碼時沒有任何反應。 – Abhik

+0

對不起,我忘記了最後的括號,我已經測試過它,它的功能。不要忘記,您將需要一個預防性的默認或刪除您的href,否則它會將您鏈接到下一頁。 –