画像をクリックで拡大表示！ライトボックス機能の実装方法【jQuery＋プラグイン対応】

Posted on by

Webサイトを訪れたユーザーにとって、画像をクリックして拡大できる機能はとても便利です。
特に、ギャラリーや商品写真など詳細を見せたいシーンでは、
「ライトボックス（Lightbox）」と呼ばれる仕組みを取り入れることで、
より快適なユーザー体験が実現します。

今回は、jQueryでライトボックスを自作する方法と、
有名プラグインを使った導入方法をそれぞれ紹介します。

ライトボックスとは？

「ライトボックス」とは、画像や動画などをクリックした際に、
ページ全体に半透明の背景がかかり、対象メディアが中央に大きく表示されるUIです。

ライトボックスは、以下のような用途でよく使われます。

  • 写真ギャラリー
  • 商品詳細表示
  • ブログ内のサムネイル拡大
  • ポートフォリオサイトの作品紹介

方法1：jQueryで自作ライトボックス

まずは、最低限の構造とスクリプトでシンプルなライトボックスを作る方法からご紹介します。

🔹HTML（サムネイル画像）

<img src="thumbnail1.jpg" alt="画像1" class="lightbox-thumb" data-full="fullsize1.jpg" />
<img src="thumbnail2.jpg" alt="画像2" class="lightbox-thumb" data-full="fullsize2.jpg" />

<!-- ライトボックス本体 -->
<div id="lightbox" class="lightbox">
  <img src="" alt="" id="lightbox-img" />
</div>

ここでは data-full 属性に拡大用の画像URLを指定します。

CSS（基本スタイル）

.lightbox {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border: 5px solid #fff;
  box-shadow: 0 0 20px rgba(0,0,0,0.7);
}

display: none にしておき、クリック時に表示させます。

jQuery（開閉処理）

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
  $('.lightbox-thumb').on('click', function() {
    const fullImg = $(this).data('full');
    $('#lightbox-img').attr('src', fullImg);
    $('#lightbox').fadeIn();
  });

  $('#lightbox').on('click', function() {
    $(this).fadeOut();
  });
});
</script>

このコードでは、サムネイルをクリックすると data-full に指定された画像を読み込み、
モーダル表示されます。背景をクリックすると閉じます。

方法2：Lightbox2などのプラグインを使う

自作よりももっと簡単に、多機能で見栄えの良いライトボックスを導入したい場合は、
「Lightbox2」などの定番プラグインを使うのが便利です。

CDNで読み込み

以下を <head> に追加します。

<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>

HTMLの書き方

<a href="fullsize1.jpg" data-lightbox="gallery" data-title="画像1の説明">
  <img src="thumbnail1.jpg" alt="画像1" />
</a>

<a href="fullsize2.jpg" data-lightbox="gallery" data-title="画像2の説明">
  <img src="thumbnail2.jpg" alt="画像2" />
</a>

画像をグループ化したい場合は data-lightbox="gallery" を共通にすればOK。
キャプション表示にも対応しています。

Lightbox2の特徴

  • スライド形式で複数画像を切り替え可能
  • キャプション対応
  • ESCキーや背景クリックで閉じられる
  • キーボードナビゲーション対応
  • スマホでもレスポンシブに対応

自作 vs プラグイン：どちらを選ぶ？

比較項目自作ライトボックスLightbox2などのプラグイン
導入の手軽さ手動でHTML＋JSが必要<a>タグだけで簡単
カスタマイズ性高い（自由に拡張可能）デフォルトのデザインを変更するにはCSS調整が必要
スライド機能別途実装が必要標準で対応
軽さ・速度最小限で高速やや重い（画像が多い場合など）
スマホ対応要調整自動対応

よくある応用：＋αの拡張アイデア

  • 画像の右下に「拡大アイコン」をつける
  • モーダルの背景にフェードアニメーションを追加
  • 動画（YouTubeなど）にも対応させる
  • スクロール停止処理を入れて操作性を向上

まとめ：ユーザー目線で画像表示を工夫しよう

ライトボックス機能は、ユーザーが「もっと画像をしっかり見たい」
というニーズに応えるシンプルで強力なUIです。

  • サムネイルをクリックして画像を大きく見せたい
  • 写真ギャラリーで複数枚切り替えたい
  • 最低限の実装だけで機能させたい

そんなときは、jQueryで自作 or Lightbox2などの導入を使い分けて、最適な体験を提供しましょう。

おまけ：デモページやコードテンプレートが欲しい方へ

ご希望があれば、実際に使えるHTMLファイル一式や、
WordPressテンプレートへの組み込み方法もご案内可能です。お気軽にお声がけください！