JavaScript だけで作るサムネイル切り替えギャラリー

Web制作では、サムネイルにマウスを乗せるとメイン画像が切り替わるギャラリーがよく使われます。この記事ではライブラリを使わず、純粋な JavaScript だけで実装する方法を解説します。

初心者でも「なぜ動くのか」が理解できるように構成しています。

Table of Contents

完成イメージ

今回つくるギャラリーは次のように動きます。

・メイン画像が一枚表示される
・その下にサムネイルが複数並ぶ
・サムネイルにマウスを乗せるとメイン画像が切り替わる
・切り替え時にふわっと透明度が上がるアニメーションが動く

視覚的に気持ち良い操作感を実現します。

HTML（基本構造）

<section class="image-gallery">

  <div class="main-image">
    <img src="main.jpg" alt="">
  </div>

  <ul class="thumbnails">
    <li><img src="thumb1.jpg" alt=""></li>
    <li><img src="thumb2.jpg" alt=""></li>
    <li><img src="thumb3.jpg" alt=""></li>
    <li><img src="thumb4.jpg" alt=""></li>
  </ul>

</section>

HTML のポイント

要素	役割
section.image-gallery	ギャラリー全体の枠
.main-image	メイン画像の表示エリア
.thumbnails	サムネイル一覧。ここに触れると切り替わる

CSS（見やすいレイアウト）

.image-gallery {
  max-width: 500px;
  margin: auto;
}

.main-image img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.thumbnails {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  list-style: none;
  padding: 0;
  margin-top: 12px;
}

.thumbnails img {
  width: 100%;
  cursor: pointer;
  transition: opacity 0.3s;
}

.thumbnails img:hover {
  opacity: 0.7;
}

CSS のポイント解説

・image-gallery で全体幅を制限して中央に配置
・main-image img は縦横比を崩さず大きく表示
・thumbnails は CSS Grid でサムネイルを自動整列
・サムネイル hover 時に透明度が下がり操作している感が出る

JavaScript（サムネイルに触れたら画像を切り替える）

document.addEventListener('DOMContentLoaded', () => {

  const mainImage = document.querySelector('.main-image img');

  const thumbs = document.querySelectorAll('.thumbnails img');

  thumbs.forEach(thumb => {

    thumb.addEventListener('mouseover', (e) => {

      mainImage.src = e.target.src;

      mainImage.animate(
        { opacity: [0, 1] },
        { duration: 400, easing: "ease-out" }
      );

    });
  });
});

JavaScript の詳しい解説

DOMContentLoaded とは

document.addEventListener('DOMContentLoaded', () => { ... });

HTML が読み終わったタイミングでコードを実行するためのイベントです。画像や要素がまだ読み込まれていない段階で実行するとエラーになりやすいため必須です。

メイン画像を取得する

const mainImage = document.querySelector('.main-image img');

main-image 内の img を一枚だけ取得します。
mainImage.src に値を入れることで画像が瞬時に切り替わります。

すべてのサムネイルを取得する

const thumbs = document.querySelectorAll('.thumbnails img');

.thumbnails 内のすべての img をまとめて取得します。
これを forEach でひとつずつ処理します。

サムネイルにマウスを乗せた瞬間の処理

thumb.addEventListener('mouseover', (e) => {

・mouseover はマウスが乗った瞬間に反応
・e.target は乗ったサムネイル画像そのもの

メイン画像を切り替える

mainImage.src = e.target.src;

サムネイルの画像 URL をメイン画像に代入するだけで切り替えができます。

ふわっと明るくなるフェードアニメーション

mainImage.animate(
  { opacity: [0, 1] },
  { duration: 400, easing: "ease-out" }
);

・opacity 0 → 1 に変化
・duration は 400ms（0.4秒）
・easing を使い柔らかく表示

CSS を書かずに JavaScript でもアニメーションが実行できます。

WordPress で使う場合の配置

種類	貼る場所
HTML	カスタム HTML ブロック
CSS	追加 CSS または style タグ
JavaScript	script タグで記事内に記述

テーマに依存しないため、どの環境でも動作します。

まとめ：このギャラリーで学べること

・DOM 取得（querySelector / querySelectorAll）
・イベント処理（addEventListener）
・event.target の扱い
・img.src を使った画像の差し替え
・Web Animations API（element.animate）

初心者の実践練習として最適な構成になっています。

MyStyle