jQuery LightBox Pluginの使い方
jQuery LightBox Pluginの使用方法をご紹介しています。
Lightbox2は別ウィンドウ（ポップアップ）ではなく、ウィンドウ内で画像や写真などをモーダルウィンドウとして表示するJavaScriptライブラリです。
jQuery LightBox PluginはjQuery版のLightBoxです。
- ※ 公式サイトがリンク切れとなったため、公式サイトとダウンロードへのリンクは削除いたしました。
- ※ このライブラリは、jQueryが別途必要です。
ダウンロードと設置
解凍後、css、images、jsディレクトリを適用するファイルと同じディレクトリに設置します。
なお、異なる階層で共通して使用する場合、オプションで設定変更が可能です。
JavaScriptとCSSの読み込み
任意の場所に設置したjQueryとjQuery LightBox PluginのJavaScriptファイルとCSSファイルを読み込みます。
パスは環境に応じて変更してください。
HTML
適用方法
a要素にモーダルウィンドウで表示する画像をhref属性を設定、さらにrel="lightbox"を追加します。
HTML
なお、同ページ内にlightboxを適用したリンクが複数ある場合、「PREV」「NEXT」ボタンは
マウスオーバー時に必ず表示されます。
$(セレクター).lightBox();のようにJavaScriptのコードを書きます。
この時点で先ほどのHTMLに対して適用されます。
JavaScript
デモ
キャプション
左下に、画像のキャプションを表示する場合は、a要素にtitle属性を追加します。
HTML
オプション
オプションは次のように設定します。
JavaScript
| オプション | 初期値 | 説明 |
|---|---|---|
| overlayBgColor | #000 | オーバーレイの背景色 |
| overlayOpacity | 0.8 | オーバーレイの透明度 |
| imageLoading | images/lightbox-ico-loading.gif | 画像読み込み中に表示される画像 |
| imageBtnClose | images/lightbox-btn-close.gif | 右下の「CLOSE」ボタンの画像 |
| imageBtnPrev | images/lightbox-btn-prev.gif | 「PREV」ボタンの画像 |
| imageBtnNext | images/lightbox-btn-next.gif | 「NEXT」ボタンの画像 |
| imageBlank | images/lightbox-blank.gif | オーバーレイの画像？ |
| containerBorderSize | 10 | LightBox本体の外枠の大きさ |
| containerResizeSpeed | 400 | リサイズ時のスピード。指定はミリ秒で設定。 |
| txtImage | Image | 左下に表示されるイメージのインデックステキスト |
| txtOf | of | 左下に表示されるイメージのインデックステキスト |
| keyToClose | c | 「CLOSE」のキーボードのキー割り当て |
| keyToPrev | p | 「PREV」のキーボードのキー割り当て |
| keyToNext | n | 「NEXT」のキーボードのキー割り当て |