【jQuery】サムネイル画像をクリックで切り替える実装方法

シュウ

今回は【jQuery】サムネイル画像をクリックで切り替える実装方法の解説になります！

こんな方に読んでほしい

jQueryを学び始めた方
基本的なクリックイベントと、画像の切り替え方法を学びたい方です。
商品ページやメニューページを作成している方
サムネイルをクリックして、メイン画像を切り替えるギャラリーを作りたい方です。
コピペで簡単に実装したい方
今回は、そのまま使えるコードを用意して解説しています。

[記事の内容]

サムネイル画像の切り替えとは

商品ページやメニュー詳細ページでは、複数の画像を見せたいケースが多くあります。
デモサイトはコチラから。
そこで、小さなサムネイルをクリックすると、大きなメイン画像が切り替わる仕組みを実装します。
完成イメージは以下のようになります。

下に並んだサムネイルをクリックすると、上のメイン画像がクリックした画像に切り替わります。

メリット

限られたスペースで複数画像を見せられる：メイン画像を大きく表示しつつ、ほかの画像も確認できます。
操作が直感的：サムネイルをクリックするだけなので、ユーザーが迷いません。
実装が簡単：jQueryの数行だけで、プラグインも不要です。

仕組みについて

仕組みはとてもシンプルです。
クリックしたサムネイルの画像パス（src）を取得し、メイン画像のsrcに上書きするだけです。
処理の流れは以下のようになります。

●①サムネイルをクリック: ユーザーがサムネイル画像をクリックします。

●②クリックした画像のsrcを取得: attr('src')で、クリックされた画像のパスを取得します。

●③メイン画像のsrcを書き換え: 取得したパスをメイン画像のsrcに設定し、表示を切り替えます。

それでは、HTML・CSS・JavaScriptの順にコードを見ていきましょう。

HTMLの記述方法について

まずは、ベースとなるHTML構造を作成します。
メイン画像のエリアと、サムネイルのリストの2つを用意することがポイントです。
書き方は以下のようになります。

<div class="menu-single__main">
    <img src="sample01.jpg" alt="" width="" height="">
</div>
<ul class="menu-single__thumbnail">
    <li><img src="sample01.jpg" alt="" width="" height=""></li>
    <li><img src="sample02.jpg" alt="" width="" height=""></li>
    <li><img src="sample03.jpg" alt="" width="" height=""></li>
</ul>

●①menu-single__main: 最初に表示する大きなメイン画像を配置するエリアです。クリック時は、この中のimgのsrcが書き換わります。

●②menu-single__thumbnail: 切り替え用のサムネイル画像を並べるリストです。liの数は、自由に増減できます。

●③src・width・height: srcは、ご自身の画像の階層に合わせて変更します。widthとheightには、画像のサイズを入れておくとレイアウトのズレを防げます。

※サムネイルの画像サイズは、メイン画像と同じ比率にそろえると、切り替え後の見た目が自然になります。

CSSのスタイル調整について

次に、CSSでメイン画像とサムネイルのデザインを調整します。
メイン画像は大きく表示し、サムネイルは3列のグリッドで横並びにしています。
書き方は以下のようになります。

.menu-single__main {margin-bottom: 3rem;}
.menu-single__main img {
    width: 100%;
    height: 37rem; /* お好みで調整してください */
    object-fit: cover;
    display: block;
}

ul.menu-single__thumbnail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

ul.menu-single__thumbnail li {cursor: pointer;}
ul.menu-single__thumbnail img {
    width: 100%;
    height: 12rem;
    object-fit: cover;
    display: block;
}

●①width / height: メイン画像をwidth: 100%、height: 37remで表示します。高さは、デザインに合わせて調整してください。

●②object-fit: cover;: 画像の縦横比を保ったまま、枠いっぱいに表示します。画像サイズがバラバラでも、見た目をそろえられます。

●③display: block;: 画像の下にできる、不要な隙間を防ぎます。

●④display: grid;: grid-template-columns: repeat(3, 1fr)で、サムネイルを等幅の3列に配置します。gapで、画像同士の間隔を調整します。

●⑤cursor: pointer;: マウスを乗せたときにカーソルが指の形に変わり、クリックできることが伝わります。

サムネイルの列数を変更したい場合は、repeat(3, 1fr)の数字を変更してください。

JavaScriptで動作を制御について

最後に、jQueryでサムネイルをクリックしたときの処理を記述します。
jQuery本体を読み込んだ後に記述してください。
書き方は以下のようになります。

// サムネイルの画像をクリックしたときの処理
$(function() {
    $('.menu-single__thumbnail img').on('click', function() {
        // クリックされたサムネイルの画像パス（src）を取得
        var targetSrc = $(this).attr('src');

        // メイン画像の src を、クリックされたサムネイルのパスに書き換える
        $('.menu-single__main img').attr('src', targetSrc);
    });
});

●①$(function() { … }): ページの読み込みが完了してから、処理を実行します。要素が存在しない状態で、取得しようとするエラーを防げます。

●②on(‘click’, …): サムネイル画像がクリックされたときの処理を登録します。

●③$(this).attr(‘src’): $(this)は、クリックされた画像そのものを指します。attr('src')で画像パスを取得し、変数targetSrcに入れます。

●④attr(‘src’, targetSrc): 第2引数を指定すると、値の取得ではなく書き換えになります。これでメイン画像が切り替わります。

※動かない場合は、jQuery本体が先に読み込まれているか、HTMLとJavaScriptのクラス名が一致しているかを確認してください。

altも切り替える場合について

上記のままだと、画像は切り替わってもaltは最初のままです。
アクセシビリティやSEOを意識する場合は、altも一緒に書き換えるのがおすすめです。
書き方は以下のようになります。

$(function() {
    $('.menu-single__thumbnail img').on('click', function() {
        var targetSrc = $(this).attr('src');
        var targetAlt = $(this).attr('alt');

        $('.menu-single__main img')
            .attr('src', targetSrc)
            .attr('alt', targetAlt);
    });
});