複数画像に対応したライトボックスをJavaScriptで実装する方法(前へ・次へ付き)

ブログなどで画像をクリックしたときにポップアップで拡大表示できる「ライトボックス機能」。さらに、複数の画像がある場合は「前へ」「次へ」ボタンがあると便利ですよね。

今回は、JavaScript(バニラJS)だけで、前へ・次へボタン付きのライトボックス機能を実装する方法をご紹介します。外部ライブラリは不要です。

See the Pen 画像をポップアップ表示するコード by hiro (@hirochanpon) on CodePen.

1. HTML:対象となる画像を<figure class="lightbox-img">で囲む

以下のように、拡大表示させたい画像をすべて <figure class="lightbox-img"> で囲みます。

<figure class="lightbox-img">
  <img src="image1.jpg" alt="画像1">
</figure>
<figure class="lightbox-img">
  <img src="image2.jpg" alt="画像2">
</figure>
<figure class="lightbox-img">
  <img src="image3.jpg" alt="画像3">
</figure>

2. CSS:ライトボックスのスタイルを追加

以下のCSSは、ライトボックスの背景やボタンの見た目を調整します。

<style>
#lightbox-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
#lightbox-overlay img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  box-shadow: 0 0 10px #fff;
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2em;
  color: white;
  background: rgba(0,0,0,0.5);
  border: none;
  padding: 0.5em 1em;
  cursor: pointer;
  z-index: 10000;
}
.lightbox-prev {
  left: 20px;
}
.lightbox-next {
  right: 20px;
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 2em;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}
</style>

3. JavaScript:ライトボックスの機能を実装

以下のJavaScriptを <script> タグで貼り付けます(</body>直前などがおすすめです)。

<script>
document.addEventListener('DOMContentLoaded', function () {
  const imageElements = Array.from(document.querySelectorAll('figure.lightbox-img img'));
  let currentIndex = 0;

  imageElements.forEach((img, index) => {
    img.addEventListener('click', function () {
      currentIndex = index;
      showLightbox();
    });
  });

  function showLightbox() {
    const overlay = document.createElement('div');
    overlay.id = 'lightbox-overlay';

    const img = document.createElement('img');
    img.src = imageElements[currentIndex].src;
    img.alt = imageElements[currentIndex].alt || '';
    overlay.appendChild(img);

    // Close button
    const closeBtn = document.createElement('button');
    closeBtn.innerHTML = '&times;';
    closeBtn.className = 'lightbox-close';
    closeBtn.addEventListener('click', () => overlay.remove());
    overlay.appendChild(closeBtn);

    // Prev button
    const prevBtn = document.createElement('button');
    prevBtn.innerHTML = '&#10094;';
    prevBtn.className = 'lightbox-nav lightbox-prev';
    prevBtn.addEventListener('click', function (e) {
      e.stopPropagation();
      currentIndex = (currentIndex - 1 + imageElements.length) % imageElements.length;
      img.src = imageElements[currentIndex].src;
      img.alt = imageElements[currentIndex].alt || '';
    });
    overlay.appendChild(prevBtn);

    // Next button
    const nextBtn = document.createElement('button');
    nextBtn.innerHTML = '&#10095;';
    nextBtn.className = 'lightbox-nav lightbox-next';
    nextBtn.addEventListener('click', function (e) {
      e.stopPropagation();
      currentIndex = (currentIndex + 1) % imageElements.length;
      img.src = imageElements[currentIndex].src;
      img.alt = imageElements[currentIndex].alt || '';
    });
    overlay.appendChild(nextBtn);

    // Click outside to close
    overlay.addEventListener('click', function (e) {
      if (e.target === overlay) {
        overlay.remove();
      }
    });

    document.body.appendChild(overlay);
  }
});
</script>

まとめ

この方法を使えば、ブログ記事の中に設置した複数画像に対して、

  • 拡大表示(ライトボックス)
  • 前へ・次へボタン
  • 閉じるボタン(×)
    がすべて動作するリッチな画像ギャラリーを手軽に導入できます。

高速・安心のWebサイト運営なら
Hostingerで決まり!

WordPressも秒速でインストール。高性能・低価格で、個人からビジネスまで幅広く対応します。

公式サイトを見る

Author