忍者ブログ
22 May

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

19 April

welcart  サブ画像クリックすると、メイン画像が切り替わる(リンクも)

jQueryとか自分で作成する能力は全然ないんですけど、
すごく簡単なやつを作ってやってみました。
個別ごとにはどうにかできるけど、繋げたりするとわからなくなる・・・。


<script>
//サブ画像のリンクをクリックしたときに、サブ画像のhref属性を取得し、メイン画像のhrefとして置き換える
jQuery(function(){
    jQuery(".itemsubimg a").click(function(){
        jQuery(".itemimg a").attr("href",jQuery(this).attr("href"));
        return false;
        });
    });
   
//サブ画像のリンクをクリックしたときに、サブ画像のsrcf属性を取得し、メイン画像のsrcとして置き換える
jQuery(function(){
    jQuery(".itemsubimg a").click(function(){
        jQuery(".itemimg img").attr("src",jQuery(this).attr("href"));
        return false;  
        });
    });   
 
//サブ画像のリンクをクリックしたときに、サブ画像のリンク内にあるテキスト要素を取得し、.cap_name の場所(メイン画像の下に<p></p>設置)にテキストとして書き込む
jQuery(function(){
    jQuery(".itemsubimg a").click(function(){
        jQuery(".cap_name").text(jQuery(this).text());
        return false;  
        });
    });
</script>

最後のやつはこの間、サブ画像をリンクループ表示させている<a></a>の中に
welcartのキャプション出力テンプレートタグを書きました。
だから<a> ~ </a>の中に含まれているテキストは、出力されたキャプション名なんです。
テンプレートタグで出力したテキストをどうやったら任意の場所にもっていけるのか、
色々クラス名などで指示して試してうまくいきませんでした。
正解は単純に (this) この .text() テキストを取得 なんですね。
頭が回らない・・・。
PR