例えば1つの商品に対して3方向から撮った写真をサムネイルにして、クリックするとメインの大きい画像が切り替わる、といったイメージです。
言葉だと少し分かりにくいですが、デモを見て頂ければ分かると思います。
- 30日間でWeb制作を学べる
- 完全無料
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 受付は1日25名までの先着制
jQueryを使ってサムネイルをクリックしてメイン画像を切り替える方法
早速ですがこちらがデモになります。
See the Pen
サムネイルクリックでメイン画像切り替え by junpei (@junpei-sugiyama)
on CodePen.
今回はjQueryを使うので、jQuery本体の読み込みを忘れないようにしましょう。
jQueryの使い方はこちらの記事を参照下さい。
-
【初心者向け】jQueryとは？CDNを使った本体の読み込み方も分かりやすく解説
続きを見る
コード解説
基本的にコピペでOKなのであまり書くことはないのですが、いくつか補足します。
HTMLのclass名についてですが、jsを使用する箇所については『js-』を付けています。
これにより『ここはjsを使用する箇所だな』と分かります。
<div class="container">
<!-- メイン画像 -->
<div class="main-img js-main-img">
<img src="画像パス1" alt="" />
</div>
<!-- サムネイル画像 -->
<ul class="sub-img js-sub-img">
<!-- 選択されている画像の枠線を変更 -->
<li class="current">
<img src="画像パス1" alt="" />
</li>
<li>
<img src="画像パス2" alt="" />
</li>
<li>
<img src="画像パス3" alt="" />
</li>
</ul>
</div>左のサムネイルを初期表示とした場合、メイン画像のsrcと左の画像のsrcを同じにします（画像パス1）
あとは選択されているサムネイルの枠線を変更するために、初期選択されている画像にclass名『.current』を付けています。
次にjsのコードを見てみます。
$(function () {
$(".js-sub-img img").on("click", function () {
// メイン画像に切り替える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(500, function () {
$(".js-main-img img")
.attr("src", img)
.on("load", function () {
$(this).fadeIn(500);
});
});
});
});枠線などを変えたい時は6〜7行目で.currentを付け外しします。
また、fadeOutとfadeInの後にある『500』という数値はフェードの時間になります。
単位はミリ秒なので、ここでは『500ミリ秒 ＝ 0.5秒』となり、ここは自由に書き換えてOKです。
CSSについては以下になりますが、デザインによって変わってくると思うので適宜変更してみて下さい。
ポイントは選択されているサムネイルの.currentに対してスタイルを設定しているところです。
/* アクティブな画像の枠線を変更 */
.sub-img li.current img {
border: 2px solid red;
transition: border .5s;
}
/* レイアウトのためのスタイル */
.container {
margin: 50px auto 0;
max-width: 500px;
}
.main-img {
height: 334px;
width: 100%;
}
.main-img img {
height: auto;
width: 100%;
}
.sub-img {
display: flex;
margin-top: 10px;
}
.sub-img li {
margin-right: 2%;
width: calc(96% / 3);
}
.sub-img li:nth-child(3n) {
margin-right: 0;
}
.sub-img li img {
border: 2px solid transparent;
transition: border .5s;
}
.sub-img img {
cursor: pointer;
width: 100%;
}選択されるサムネイルの枠線を変えるだけでなく、transition: border .5s;を書いてゆっくりと変化させています。
まとめ
今回はjQueryを使ってサムネイルのクリックでメイン画像を切り替える方法を解説しました。
ちょっとアニメーションを加えるだけでグッと良くなりますね。
以上になります。
