在CLick上替換圖像SRC

我有一個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有很少的知識，所以請幫助我。我想要的只是當有人點擊任何縮略圖圖像時，縮略圖圖像取代了大圖像，而大圖像取代了被點擊的縮略圖。所以基本上是改變立場。

請原諒我的可憐的英語。

來源

2013-07-02 Abhik

jQuery的

您可以onclick事件

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

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

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

And have look once

來源

2013-07-02 09:04:47

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

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

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

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

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

來源

2013-07-02 09:08:09 silentw

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

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

來源

2013-07-02 09:09:05

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

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

在CLick上替換圖像SRC

回答

相關問題