jQuery LightBox Pluginの使い方 jQuery LightBox Plugin

jQuery LightBox Pluginの使用方法をご紹介しています。
Lightbox2は別ウィンドウ(ポップアップ)ではなく、ウィンドウ内で画像や写真などをモーダルウィンドウとして表示するJavaScriptライブラリです。
jQuery LightBox PluginはjQuery版のLightBoxです。

  • ※ 公式サイトがリンク切れとなったため、公式サイトとダウンロードへのリンクは削除いたしました。

ダウンロードと設置

解凍後、css、images、jsディレクトリを適用するファイルと同じディレクトリに設置します。
なお、異なる階層で共通して使用する場合、オプションで設定変更が可能です。

JavaScriptおよびCSSの読み込みと設定

以下を<head>内に記載します。
パスは環境により変更してください。

HTML

適用方法

a要素にrel="lightbox"を追加します。

HTML

なお、同ページ内にlightboxを適用したリンクが複数ある場合、「PREV」「NEXT」ボタンは
マウスオーバー時必ず表示されます。

サンプル

キャプション

左下に、画像のキャプションを表示する場合は、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」のキーボードのキー割り当て