ライトボックスとは

サムネイル画像をクリックすると、背景を暗転させたまま元の画像を拡大表示する仕組み。

概要

小さく並んだサムネイル画像をクリックすると、背景を暗くしたうえで、その画像を大きく表示する仕組みです。別のページに移動せず、その場で写真を大きく見せられるため、写真ギャラリーや商品画像の一覧でよく使われます。閉じるボタンや暗い部分のクリックで元の画面に戻ります。

別名

表記ゆれ：画像ポップアップ、画像拡大表示、lightbox

写真スタジオで使う照明装置「ライトボックス」に、暗い場所で画像だけが浮かび上がって見える様子をなぞらえた名前です。

AI への伝え方

「画像をクリックしたらライトボックスで拡大表示して」で通じます。複数枚並んでいるときに前後の画像へ矢印で移動できるようにするかどうかも、仕様として伝えると実装がぶれません。

似たパーツとの違い

「モーダル」は確認メッセージやフォームなど任意の内容を表示する汎用の部品ですが、ライトボックスは画像の拡大表示に特化した使い方を指します。「画像ギャラリー」はサムネイルを並べて見せる一覧そのものを指し、ライトボックスはそこから開く拡大表示の部分を指す違いがあります。

デモ

コード

HTML

<div class="lightbox-demo">
  <div class="lightbox-demo__grid">
    <button class="lightbox-demo__thumb" type="button" data-lightbox-open data-color="#0017c1" aria-label="画像 1 を拡大表示">
      <span class="lightbox-demo__thumb-shape" style="background:#0017c1"></span>
    </button>
    <button class="lightbox-demo__thumb" type="button" data-lightbox-open data-color="#666666" aria-label="画像 2 を拡大表示">
      <span class="lightbox-demo__thumb-shape" style="background:#666666"></span>
    </button>
    <button class="lightbox-demo__thumb" type="button" data-lightbox-open data-color="#b3b3b3" aria-label="画像 3 を拡大表示">
      <span class="lightbox-demo__thumb-shape" style="background:#b3b3b3"></span>
    </button>
  </div>

  <div class="lightbox-demo__overlay" data-lightbox-overlay hidden>
    <button class="lightbox-demo__close" type="button" data-lightbox-close aria-label="閉じる">×</button>
    <span class="lightbox-demo__large" data-lightbox-large aria-hidden="true"></span>
  </div>
</div>

CSS

.lightbox-demo {
  font-family: sans-serif;
}

.lightbox-demo__grid {
  display: flex;
  gap: 12px;
}

.lightbox-demo__thumb {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.lightbox-demo__thumb-shape {
  display: block;
  width: 100%;
  height: 100%;
}

.lightbox-demo__overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  z-index: 100;
}

/* hidden 属性の既定スタイル(display: none)を、上の display: flex より優先させる */
.lightbox-demo__overlay[hidden] {
  display: none;
}

.lightbox-demo__large {
  display: block;
  width: 220px;
  height: 220px;
  border-radius: 12px;
}

.lightbox-demo__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

const overlay = document.querySelector("[data-lightbox-overlay]");
const large = document.querySelector("[data-lightbox-large]");

document.querySelectorAll("[data-lightbox-open]").forEach((thumb) => {
  thumb.addEventListener("click", () => {
    large.style.background = thumb.getAttribute("data-color");
    overlay.hidden = false;
  });
});

document.querySelector("[data-lightbox-close]").addEventListener("click", () => {
  overlay.hidden = true;
});

overlay.addEventListener("click", (event) => {
  if (event.target === overlay) overlay.hidden = true;
});