複数の画像を個別に切り替える方法

Posted on by

Webページ上で、複数の商品画像を個別に切り替える方法について解説します。
一般的なサムネイル画像のクリックで大きな画像を変更する機能を、商品ごとに適用する方法を紹介します。

HTML コード

以下の HTML は、サンプルとして商品リストを表示するものです。各商品には、サムネイル画像をクリックすると対応する大きな画像が切り替わる仕組みを組み込んでいます。

<ul class="item_box">
    <li>
        <div class="center">
            <div class="photo_area">
                <img src="sample/sample1.jpg" id="bigimg">
            </div>
            <ul>
                <li><img src="sample/sample1.jpg" class="thumb" data-image="sample/sample1.jpg"></li>
                <li><img src="sample/sample2.jpg" class="thumb" data-image="sample/sample2.jpg"></li>
                <li><img src="sample/sample3.jpg" class="thumb" data-image="sample/sample3.jpg"></li>
            </ul>
        </div>
        <div class="text_box">
            <ul class="text">
                <li>サンプル商品A</li>
                <li class="amount">10,000円<span>(税込)</span></li>
            </ul>
        </div>
    </li>
    <li>
        <div class="center">
            <div class="photo_area">
                <img src="sample/sample4.jpg" id="bigimg">
            </div>
            <ul>
                <li><img src="sample/sample4.jpg" class="thumb" data-image="sample/sample4.jpg"></li>
                <li><img src="sample/sample5.jpg" class="thumb" data-image="sample/sample5.jpg"></li>
                <li><img src="sample/sample6.jpg" class="thumb" data-image="sample/sample6.jpg"></li>
            </ul>
        </div>
        <div class="text_box">
            <ul class="text">
                <li>サンプル商品B</li>
                <li class="amount">15,000円<span>(税込)</span></li>
            </ul>
        </div>
    </li>
</ul>

JavaScript コード

次に、サムネイル画像をクリックすると、
該当する商品ごとに大きな画像を変更する JavaScript を記述します。

document.querySelectorAll('.thumb').forEach(item => {
    item.addEventListener('click', function () {
        // クリックされた thumb の親の .center 内にある img を取得
        const bigImg = this.closest('.center').querySelector('#bigimg');
        if (bigImg) {
            bigImg.src = this.dataset.image;
        }
    });
});

コードの解説

document.querySelectorAll('.thumb') で全てのサムネイルを取得

thumb クラスを持つすべての画像要素に対してイベントリスナーを設定します。

クリックイベントの追加

item.addEventListener('click', function () {...}) により、クリックしたサムネイルの data-image に設定された画像パスを取得します。

closest('.center') を使用

クリックされたサムネイルの親要素（.center）を取得し、その中の bigimg の src を変更します。

動作イメージ

サンプル画像1のサムネイルをクリックすると、1つ目の bigimg が切り替わる。
サンプル画像4のサムネイルをクリックすると、2つ目の bigimg が切り替わる。
各商品ごとに bigimg が独立して変更される。

まとめ

この方法を使用すると、複数のアイテムがある場合でも、
それぞれの bigimg を個別に変更できるようになります。
特に商品リストページやフォトギャラリーなどに活用できます。

このコードをカスタマイズして、さらに使いやすい UI を作成してみてください

投稿者プロフィール

小清水 和真
小清水 和真WebProducer
WebディレクションからWebザイン・コーディングを主に行っております。
2021年株式会社を設立。講師もしております。