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

Web制作では、サムネイルにマウスを乗せるとメイン画像が切り替わるギャラリーがよく使われます。この記事では、ライブラリを使わずに JavaScript だけで実装する方法を説明します。初心者でも仕組みが理解できるように構成しています。

---

完成イメージ

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

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

視覚的に自然で使いやすい構成です。

---

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 のポイント

要素	説明
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 で自動整列
・サムネイルにホバーした時に透明度を変えて操作性を出す

---

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 を使う理由は、HTML が読み込まれて構造が準備できてからスクリプトを実行するためです。要素がまだ読み込まれていない状態で実行するとエラーが起きます。

main-image 内の画像は querySelector で取得し、src を変更することで表示する画像を切り替えます。

サムネイル画像は querySelectorAll で複数まとめて取得し、forEach で一つずつイベントを加えます。mouseover はマウスが乗った瞬間に発火するイベントで、e.target はそのサムネイルを指します。

画像切り替え後、animate を使って opacity を 0 から 1 に変化させることでフェードアニメーションが動きます。Web Animations API を利用しているため CSS なしでアニメーションができます。

---

WordPress での利用方法

・HTML はカスタム HTML ブロックに貼る
・CSS は追加 CSS または style タグで追加可能
・JavaScript は script タグで記事内に記述できる

テーマに依存せず、他ページに干渉しないため安心して利用できます。

---

まとめ

このギャラリーでは次の JavaScript 基礎が学べます。

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

実用的でありながら初心者が理解しやすい構造のため、練習に最適です。