JavaScript
jQueryプラグイン「scroll-hint」で横スクロールを気づきやすくする方法
2025.11.18
Lightbox2の使い方をやさしく解説｜画像をクリックで拡大表示しよう
2025.11.10
1. はじめに
前回の記事では、jQueryプラグイン「Slick」を使って画像スライダーを作成する方法を紹介しました。今回は、引き続きWeb制作でよく使われるjQueryプラグインを紹介します。取り上げるのは、画像をクリックすると拡大表示できるプラグイン「Lightbox2」です。
Lightbox2は、写真ギャラリーやポートフォリオサイトなどでよく利用されるプラグインです。サイト内の画像を拡大し、背景を暗くして表示することで、閲覧者にとってより見やすく美しい演出ができます。
2. Lightbox2とは
Lightbox2は、jQueryを利用して画像をモーダルウィンドウ（元の画面の上に重ねて表示されるウィンドウ）で表示するためのプラグインです。画像をグループ化して、前後の画像にスライドで切り替えることもできます。
公式サイト：https://lokeshdhakar.com/projects/lightbox2/
主な特徴は次のとおりです。
- シンプルなHTMLで実装できる
- jQueryを利用した軽量な動作
- グループ化やタイトル表示に対応
- CSSのカスタマイズがしやすい
3. Lightbox2の導入方法
Lightbox2には、ファイルをダウンロードして使用する方法と、CDNを利用する方法の2通りがあります。ここでは、より簡単に導入できるCDNを利用する方法を紹介します。
HTMLの<head>タグ内と</body>タグの直前に、以下のコードを追加してください。
<head>タグ内
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet" />
</body>タグ直前
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
注意点として、</body>タグ直前に追加するLightbox2のCDNコードは、必ずjQuery本体のCDNの後に記述してください。
4. 基本的な使い方
Lightbox2は、画像をリンク化してプラグイン固有の属性「data-lightbox」を指定するだけで動作します。基本的にHTMLの記述だけで実装できるため、非常にシンプルなのが特徴です。
以下に今回の完成イメージを表示します。
4.1. HTMLの基本構造
以下のように、拡大表示したい画像を<a>タグで囲み、data-lightbox属性を指定します。同じグループ名を設定すると、左右の矢印で画像を切り替えられるようになります。また、<a>タグと<img>タグで別の画像を指定することで、サムネイルをクリックして別画像を表示させることもできます。
<div class="mordal_sample"> <a data-lightbox="sample" href="image/sample1.png"> <img src="image/sample1.png" alt="サンプル画像1"> </a> <a data-lightbox="sample" href="image/sample2.png"> <img src="image/sample2" alt="サンプル画像2"> </a> <a data-lightbox="sample" href="image/sample3.png"> <img src="image/sample3" alt="サンプル画像3"> </a> </div>
この記述だけで、クリックすると画像がモーダルウィンドウで拡大表示されます。
4.2. タイトルを追加する
画像にタイトルを表示したい場合は、<a>タグにdata-title属性を追加します。
※今回は、省略のため<a>タグのみを表記しています。
<a data-lightbox="sample" href="image/sample1.png" data-title="時計"></a> <a data-lightbox="sample" href="image/sample2.png" data-title="財布"></a> <a data-lightbox="sample" href="image/sample3.png" data-title="ペンとメモ"></a>
4.3. CSS
CSSを使ってサムネイル画像を整え、見やすくレイアウトします。
.mordal_sample{
display: flex;
justify-content: space-between;
column-gap: 20px;
}
5. よく使うオプション
Lightbox2には、動作やデザインを調整できるオプションがいくつか用意されています。代表的な設定項目を以下にまとめました。
| オプション名 | 説明 | 初期値 |
|---|---|---|
| maxWidth | 表示する画像の最大幅を設定します（px）。 | null（制限なし） |
| maxHeight | 表示する画像の最大高さを設定します（px）。 | null（制限なし） |
| albumLabel | グループ画像の番号表示を変更します。 | “Image %1 of %2” |
| fadeDuration | フェードアニメーションの速度（ミリ秒） | 600 |
| resizeDuration | サイズ変更時のアニメーション速度 | 700 |
| wrapAround | 最後の画像の後に最初へ戻る | false |
| positionFromTop | モーダルを画面上端からどのくらい下げるか（px） | 50 |
オプションを設定する際は、jQueryでlightbox.option()メソッドを使用します。設定は指定したdata-lightboxすべてに反映され、個別に設定することはできませんので注意してください。
lightbox.option({
'resizeDuration': 400,
'fadeDuration': 300,
'wrapAround': true,
'albumLabel': "これは%2番中%1番目の画像です",
'positionFromTop': 200
});
これらの値を調整することで、表示アニメーションやタイトル位置などをカスタマイズできます。
6. まとめ
今回は、jQueryプラグイン「Lightbox2」を使って、クリックで画像を拡大表示する方法を紹介しました。Lightbox2はHTMLの記述だけで簡単に実装できるため、初心者の方にも扱いやすいプラグインです。また、前回紹介した「Slick」と組み合わせることで、スライダー内の画像をLightbox2で拡大表示することもできます。写真や作品をより美しく見せたい場合に、ぜひ活用してみてください。
投稿一覧に戻る
