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」のキーボードのキー割り当て