複数画像に対応したライトボックスを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>