0

ギャラリーがある WooCommerce のセットアップがあります。1 つは大きな画像で、他はサムネイルです。

私がやりたいのは、誰かがサムネイルをクリックすると、大きな画像が置き換えられ、大きな画像がサムネイルに表示されることです。それ、どうやったら出来るの？助けてくれる 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

Jクエリ

イベントでsrcを使用できattr()ますonclick

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

またはプレーンなJavaスクリプトを使用 

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

そして一度ご覧ください

于 2013-07-02T09:04:47.400 に答える
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 に答える
0

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

onclickイベントで使用できる純粋な JavaScript の代替。

于 2013-07-02T09:08:09.493 に答える