0

我有一个 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知之甚少，所以请帮助我。我想要的只是当有人点击任何缩略图时，缩略图替换大图，大图替换点击的缩略图。所以基本上改变了位置。

请原谅我糟糕的英语。

4

3 回答 3

2

jQuery

attr()您可以在onclick事件中使用 src

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

或使用纯java 脚本 

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

并且看过一次

于 2013-07-02T09:04:47.400 回答
0

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

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

于 2013-07-02T09:08:09.493 回答
0 
$(document).ready(function() {
 $('.zoom').on('click', function() {
  $('.big_image').find('img').attr('src', $(this).find('img').attr('src'));
 });
});

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

于 2013-07-02T09:09:05.997 回答