サムネイルをクリックするとメインの画像が切り替わる方法ない？
今回はそんな疑問にお答えします。
1つの商品に対して3方向から撮った写真をサムネイルにして、クリックするとメインの大きい画像が切り替わるといった感じのイメージです。
言葉だと少し分かりにくいので、例を見た方が早いですねｗ
サムネイルをクリックでメイン画像が切り替わる方法（完成形）
早速完成形を見てみましょう（コードを見るには左上の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>
<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 () {
img = $(this).attr("src");
$(".js-main-img img").fadeOut(500, function () {
$(".js-main-img img")
.attr("src", img)
.on("load", function () {
$(this).fadeIn(500);
});
});
});
});fadeOut と fadeIn の後にある500という数値ですが、フェードの時間になります。
単位はミリ秒なので、ここでは500ミリ秒＝0.5秒となります。
ここは自由に書き換えてOKです。
cssについてはデザインによって変わってくると思うので、適宜変更してみて下さい。
以上です。