2021/07/05

画像を拡大してポップアップ表示できる”Lightbox2″の使い方

“Lightbox2″は、画像を拡大してモーダルダイアログにポップアップ表示させることができるJavaScriptライブラリです。
今回は、この”Lightbox2″の使い方を紹介していきます。

・Lightbox2のページ
https://lokeshdhakar.com/projects/lightbox2/

“Lightbox2″のソースコードをダウンロード

まずは、ソースコードをダウンロードしましょう。
“Lightbox2″のソースコードは“Lightbox2″のGitHubページからZIPファイル形式でダウンロードすることができます。
下の図は、2021年6月時点での最新版である「v2.11.3」のページです。赤い下線を引いた「Source code(zip)」をクリックするとソースコードのZIPファイルをダウンロードできます。

・”Lightbox2″のGitHubページ
https://lokeshdhakar.com/projects/lightbox2/

ダウンロードしたZIPファイルを解凍すると「lightbox2-2.11.3」というフォルダができます。その中にある「dist」フォルダの中にあるファイルを使用します。
「dist」フォルダの中身は、下の図のようになっており「css」「images」「js」のフォルダがあります。

“Lightbox2″を使用する準備

次に、”Lightbox2″を使用する準備として各ファイルを設置したり読み込ませる記述をしていきます。

CSSファイルの設置と読み込み

上記の工程でダウンロードして解凍した「dist」フォルダ内の「css」フォルダにあるlightbox.cssかlightbox.min.cssのどちらかを”Lightbox2″を使用するサイトに設置してHTMLファイルのheadタグ内で読み込ませます。

記述例

<link href="path-to/lightbox.min.css" rel="stylesheet">

JSファイルの設置と読み込み

“Lightbox2″の動作には、jQueryが必要です。
“Lightbox2″を使用したいページにjQueryを読み込んでいない場合、前述した「dist」フォルダ内の「js」フォルダにあるlightbox-plus-jquery.jsかlightbox-plus-jquery.min.jsを使用することで別途jQueryを読み込ませる必要がなくなります。
既にjQueryを読み込んであるページで”Lightbox2″を使用したい場合には、lightbox.jsかlightbox.min.jsを使用しましょう。
いずれかのJSファイルをサイトに設置して、HTMLファイルのbodyタグの閉じタグ直前で読み込ませます。

記述例

<script src="path-to/lightbox-plus-jquery.min.js"></script>

「images」フォルダの設置

前述した「dist」フォルダ内の「images」フォルダ内には、”Lightbox2″が使用するローディングやナビゲーションの画像が入っています。
「images」フォルダごとサイトのcssフォルダなどと同じ場所に設置しておきましょう。

“Lightbox2″で拡大表示させたい画像をHTMLへ設置

“Lightbox2″で拡大表示させたい画像を、aタグのhref属性にパスとファイル名を指定します。
合わせてdata-lightbox属性を指定することで画像の拡大表示が可能になります。
以下では、画像１枚だけを単体で設置したい場合と、複数の画像をセットで設置したい場合とに分けて記述例を紹介していきます。

画像１枚だけの場合

href=に画像へのパスと画像のファイル名を指定します。
data-lightbox=に任意の名称を指定します。
一枚の画像を複数設置する形にしたいときには、この項目にそれぞれ固有の名称を指定してください。
data-title=にキャプションとして表示させたい文字列を指定します。
画像を拡大表示した時のキャプションが不要な場合には、記述がなくても大丈夫です。
拡大した画像にalt属性を指定したいときは、data-alt=に指定したい文字列を指定します。

“Lightbox2″で画像を一枚だけ単体で使用したい場合の記述例

<a href="images/image-1.jpg" data-lightbox="image-1" data-title="My caption" data-alt="Alt text">Image #1</a>

複数の画像セットの場合

複数の画像をセットとして使用したい場合、複数のaタグを設置し、href=にそれぞれの画像へのパスと画像のファイル名を指定した上で、data-lightbox=属性に共通の名称を指定します。

“Lightbox2″で複数の画像をセットとして使用したい場合の記述例

<a href="images/image-1.jpg" data-lightbox="image-set">Image #1</a>
<a href="images/image-2.jpg" data-lightbox="image-set">Image #2</a>
<a href="images/image-3.jpg" data-lightbox="image-set">Image #3</a>
<a href="images/image-4.jpg" data-lightbox="image-set">Image #4</a>

“Lightbox2″のオプション

“Lightbox2″では、設定を変更できるオプションも多数用意されています。
オプションの設定方法と主なオプションについて紹介していきます。

オプションを設定するときの記述方法

オプションで設定を変更したい場合は、HTMLファイルの”Lightbox2″を読み込ませたscriptタグの後にオプションの記述を追加します。

オプションを設定したい場合の記述例

<script src="path-to/lightbox-plus-jquery.min.js"></script>
<script>
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true
    })
</script>

主なオプションの紹介

オプションで設定できる項目はたくさんありますが、主なものをいくつか紹介していきます。

オプション名	初期値	機能
‘alwaysShowNavOnTouchDevices’	false	この値が”false”の場合、複数の画像セットを拡大表示した時のナビゲーション（左右の矢印）は、マウスをホバーしたときにしか表示されません。スマートフォンなどマウスホバーがないデバイスでナビゲーションを使用したいときには、この値を”true”にしておくとタッチ操作がサポートされたデバイスでは常に左右の矢印が表示されるようになります。
‘disableScrolling’	false	この値が”false”の場合、画像が拡大表示されているときに、背景になっている元のページがスクロールできないようになります。
‘fadeDuration’	600	拡大画像の黒背景がフェードイン/フェードアウトするのにかかる時間（ミリ秒）を設定します。
‘imageFadeDuration’	600	拡大された画像がフェードイン/フェードアウトするのにかかる時間（ミリ秒）を設定します。
‘positionFromTop’	50	拡大された画像が配置される位置を画面トップからのピクセル数で設定します。
‘resizeDuration’	700	拡大された画像が切り替わる際にサイズが変化するのにかかる時間（ミリ秒）を設定します。
‘wrapAround’	false	この値が”false”の場合、複数の画像セットを使用しているときの拡大画像にある左右のナビゲーションで最後の画像から１枚目の画像にループすることができません。