つぶやき
-ブログ-

javascriptでサムネイルギャラリーを作成する方法

2022年10月21日

下記のGIF画像のようにサムネイルギャラリーでは、メインの画像の下に並べられているサムネイルをクリックすると画像を切り替えられます。

モデルの写真を紹介する場合で、服装の違う写真を見せたいケースなどでサムネイルギャラリーは活用できます。今回はJavaScriptでサムネイルギャラリーを作成する方法を解説します。

サムネイルギャラリーを作成できるコード

以下が上記のGIF画像で作成したサムネイルギャラリーを作成するためのHTML、CSS、javascriptのコードになります。ではjavascriptのコードに関して詳しく解説していきます。

▢HTML

<section class="thumbnail_gallery">
        <div class="main_img"><img src="img/1.jpg" width="600" height="450" id="big_img"></div>
        <ul class="thumbnail_gallery_list">
            <li><img src="img/1.jpg" width="130px" height="98px" class="thumbnail" data-image="img/1.jpg"></li>
            <li><img src="img/2.jpg" width="130px" height="98px" class="thumbnail" data-image="img/2.jpg"></li>
            <li><img src="img/3.jpg" width="130px" height="98px" class="thumbnail" data-image="img/3.jpg"></li>
            <li><img src="img/4.jpg" width="130px" height="98px" class="thumbnail" data-image="img/4.jpg"></li>
        </ul>
    </section>

▢CSS

body {
  background-color: aliceblue;
}
.thumbnail_gallery {
  width: 600px;
  margin: 0 auto;
  margin-top: 10px;
}
 
.thumbnail_gallery .thumbnail_gallery_list {
  list-style: none;
  padding-left: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
 
.thumbnail_gallery .thumbnail_gallery_list li {
  margin-left: 15px;
}
 
.thumbnail_gallery .thumbnail_gallery_list li .thumbnail {
  cursor: pointer;
}
 
.thumbnail_gallery .thumbnail_gallery_list li .thumbnail:hover {
  opacity: 0.7;
}

▢js

  <script>
        const thumbs = document.querySelectorAll('.thumbnail')
        for (let i = 0; i < thumbs.length; i++) {
            thumbs[i].onclick = function () {
                document.getElementById('big_img').src = this.dataset.image;
            };
        }
    </script>


const thumbs = document.querySelectorAll('.thumbnail')

querySelectorAllとは、CSSのセレクタにマッチする要素をすべて取得するメソッドです。これによりHTMLファイルに記載してある(.thumbnail)というCSSのセレクタをすべて取得できるようになります。

for (let i = 0; i < thumbs.length; i++) {

ループの記述です。lengthとは要素の数。つまり.thumbnailセレクタを付与しているサムネイル画像の数が格納されています。今回はサムネイル画像は4枚のため、lengthには4という数字が格納されています。そのため4以下までループが続くという処理になります。

thumbs[i].onclick = function () {
document.getElementById(‘big_img’).src = this.dataset.id;
};

.onclickではクリックイベントを設定できます。つまり○枚目のサムネイル画像がクリックされると、function以降の処理が行われるという記述になります。

「this」とはイベントが発生した要素を指定できます。つまりここではクリックされたサムネイルの要素を指定しています。

「dataset.image」はHTMLの「data-image」の値を引き出している記述です。「dataset.image」も「data-image」も「image」と記載してありますが、「image」の部分は任意に変更できます。

document.getElementByIdでは、サムネイルの上にあるメイン画像のid属性「big_img
」を取得しています。

そしてthis.dataset.idの値を「big_img」の画像ソースに代入することで、画像がクリックしたサムネイルの画像に切り替わります。

GIV株式会社は、埼玉県川越市にあるWEB（ホームページ）制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。

前の記事へ

次の記事へ

一覧へ戻る

つぶやき-ブログ-

javascriptでサムネイルギャラリーを作成する方法

サムネイルギャラリーを作成できるコード

つぶやき
-ブログ-