画像をクリックしたらモーダルウィンドウが表示されるjQueryアプリケーション「Lightbox」の設置方法です。

シンプルとはいえ、レスポンシブ対応なのでスマホやタブレットでもちゃんと横幅に合わせたサイズで表示されますし、optionのパラメーターを追加すれば、フェイドの時間など細かい動作も変更可能です。

最近のバージョンではLightbox動作用のjavascriptファイル設置場所が変更されています。使用するjQueryのバージョンも1.7以降となっているので注意してください。

ダウンロード

まずはLightbox公式サイトからダウンロードをします。
「DOWNLOAD」をクリックすると、Lightbox本体一式がダウンロードできます。

Lightboxサイト

ダウンロードしたLightbox本体「lightbox2-master.zip」を解凍し、必要なファイルだけを抜き出します。

使用するファイルについて

ダウンロードしたものの中に「src」と「dist」というファイルがあり、どちらにもcss／jsがありますが「dist」内のものを使用してください。
（Lightboxサイトにもdistのものを読み込むとかいてあります。）
※src内のものを使用してもLightboxは開きませんので注意。

• lightbox-plus-jquery.min.js
• lightbox.css
• close.png
• loading.gif
• next.png
• prev.png

dist内のものを自分のファイル内に移動して使用します。

imagesファイル内にはhover時に表示される「>」の画像や画像読み込み時のローデイング画像が入っています。
ファイルを移動させたあと、または、imagesファイルをimgなどにリネームした場合はcss内の画像のパスを変更しておく必要があります。
各ファイルへのパスは環境に合わせて書き換えてください。

CSS／JSの読み込み

CSS

dist/css内の「lightbox.css」または「lightbox.min.css」をheadタグ内に読み込みます。

 

JS

dist/js内のjsファイルをを「body閉じタグの直前に」読み込みます。
※headタグ内で読み込んでも作動しないので注意。

通常はLightboxを動作させるためのjQueryを別途用意しないといけませんが、「lightbox-plus-jquery.min.js」は動作用のJavaScriptファイルとjQueryが一体になっているので必要ありません。

もしサイト内ですでにjQueryを使用している場合は、「lightbox-plus-jquery.min.js」を「lightbox.min.js」に変更してください。

jQuery本体を使う場合のJS

jQueryを使う場合に読み込むLightboxのJSはdist内の「lightbox.js」または「lightbox.min.js」です。

jQuery本体を使わない場合

dist内にjQueryとLightboxが両方入っている「lightbox-plus-jquery.js」または「lightbox-plus-jquery.min.js」を使用します

 

HTML＜画像の挿入＞

Lightboxを動作させるためには、「data-lightbox」という属性が付いた＜a＞タグで画像をリンクします。＜a＞タグと＜img＞タグの画像URLは同じです。

 

複数の画像をまとめておきたい時（「>」で次の画像へ移動できる）はdata-lightboxに同じ値を指定することでまとめておくことができます。

 

「data-title」を指定するとウィンドウで表示時に下部に表示されます

 

オプション

scriptタグ内でオプションの記述ができ細かい表示動作などをを変更できる機能があります。

一例として、画像間のリサイズ処理時間変更（resizeDuration）と、グループ内最後の画像から一番最初に戻るオプション（wrapAround）を設定しました。

【オプションの記述の例】

 

オプションはLightboxのjavascriptコードの下に追加してください。

指定できるオプション

オプション	デフォルトの設定	説明
alwaysShowNavOnTouchDevices	false	trueの場合、マウスのhover時に左右のナビゲーション矢印が表示されます。
albumLabel	“Image %1 of %2”	キャプションの下に表示されるテキストを設定できます。デフォルトのテキストは、現在の画像番号とセットでの画像の総数を示しています。
disableScrolling	false	trueの場合、Lightboxが開いている間、スクロールができないようになります。
fadeDuration	500	ライトボックスコンテナ（モーダルウィンドウ）がフェードイン、フェードアウトするのにかかる時間をミリ秒単位で設定できます。
fitImagesInViewport	true	trueの場合、画面内に収まるように画像のサイズを変更します。
maxWidth		設定した場合は、画像の幅をピクセル単位で設定します。アスペクト比は維持されません。
maxHeight		設定した場合は、画像の高さをピクセル単位で設定します。アスペクト比は維持されません。
positionFromTop	50	ページ上部からの距離をpx単位で指定できます。
resizeDuration	700	異なるサイズの画像間の遷移時の幅と高さのアニメーション速度をミリ秒単位で指定できます。
showImageNumberLabel	true	falseの場合、キャプションの下に表示されるテキスト（現在の画像番号とセットでの画像の総数）が表示されなくなります。
wrapAround	false	trueの場合、最後の画像に達したときに、右のナビゲーション矢印が表示され、最初の画像に戻れるようになります。（ループしてみれる）

 

以上、Lightboxの設置と使い方でした。