Question

我有一个WooCommerce设置，我有一个画廊。一个是大图像，另一个是缩略图。

我想要做的是当有人点击缩略图时，它会替换大图像，而大图像会出现在缩略图上。我怎么做？这里有任何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知之甚少，所以请帮帮我。我想要的是当有人点击任何缩略图图像时，缩略图图像会替换大图像，而大图像会替换点击的缩略图。所以基本上是改变立场。

请原谅我英语不好。

Answer 1

Jquery

您可以在attr()事件

中使用src onclick

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

或使用普通的 java脚本

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

And have look once

Answer 2

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

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

Answer 3

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

你应该尝试一下，但最好有单独的缩略图和大图像文件用于加载目的。

在CLick上替换Image SRC

3 个答案: