
今回はそんな疑問にお答えします。
1つの商品に対して3方向から撮った写真をサムネイルにして、クリックするとメインの大きい画像が切り替わるといった感じのイメージです。
言葉だと少し分かりにくいので、例を見た方が早いですねw
効率よくコーディングしたい人はこちら
サムネイルをクリックでメイン画像が切り替わる方法(完成形)
早速完成形を見てみましょう(コードを見るには左上のHTML、CSSをクリックして下さい)
See the Pen
サムネイルクリックでメイン画像切り替え by junpei (@junpei-sugiyama)
on CodePen.
コードの解説
基本的にコピペでOKなのであまり書くことはないのですが、いくつか補足します。
htmlのclass名についてですが、js を使用する箇所については js- を付けています。
これによりここは js を使用する箇所だなと分かります。
imgタグについては完成形のコードだと少し見にくいですが、こうなっています。
<div class="container">
<div class="main-img js-main-img">
<img src="画像1"/>
</div>
<ul class="sub-img js-sub-img">
<li class="current"><!-- アクティブな画像の枠線を変更 -->
<img src="画像1"/>
</li>
<li>
<img src="画像2"/>
</li>
<li>
<img src="画像3"/>
</li>
</ul>
</div>
左のサムネイルを初期表示とした場合、メイン画像のsrcと左の画像のsrcを同じにします。
次にjsのコードを見てみます。
$(function () {
$(".js-sub-img img").on("click", function () {
// mainに切り替えるimgのsrc取得
img = $(this).attr("src");
// currentクラス付け替え(枠線などを変えたい時に)
$(".js-sub-img li").removeClass("current");
$(this).parent().addClass("current");
// fadeOutできたらsrc変更してfadeIn
$(".js-main-img img").fadeOut(50, function () {
$(".js-main-img img")
.attr("src", img)
.on("load", function () {
$(this).fadeIn();
});
});
});
});
fadeOut と fadeIn の後にある500という数値ですが、フェードの時間になります。
単位はミリ秒なので、ここでは500ミリ秒=0.5秒となります。
ここは自由に書き換えてOKです。
cssについてはデザインによって変わってくると思うので、適宜変更してみて下さい。
以上です。
Brainランキング1位獲得 & 3日で500部突破 クチコミ約300件 今だけ!5つの無料特典あり🎁 👇画像をクリック
コーディング案件の単価と作業効率を上げる!
(平均スコア)