Lightbox2.0の使い方

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

※ 2012年4月10日に2.5にバージョンアップされ、prototypeからjQueryへと変更されていますので、Lightbox2を新しく設置される方はLightbox2.5～2.7の使い方をご覧ください。
※ IE10でうまく動作しない場合は、prototype.jsを1.7.1以降にバージョンアップすることで解消されます。

ダウンロードと設置

こちらにアクセスして「View Raw」をクリック、ダウンロードして解凍します。
解凍後、css、images、jsディレクトリを適用するファイルと同じディレクトリに設置します。

なお、異なる階層で共通して使用する場合、jsディレクトリ内にある「lightbox.js」やcssディレクトリ内にある「lightbox.css」を書き換える必要があります。
書き換え方法はこちらをご覧ください。

次を<head>要素内に記述します。
パスは環境により変更してください。

HTML

a要素にモーダルウィンドウで表示する画像をhref属性を設定、さらにrel="lightbox"属性を設定します。
なお、次のサンプルコードではa要素内はテキストを入れていますが、何が入っていても問題ありません。

HTML

画像をグループ化し、クリックで次や前の画像を切り替える場合は以下のようにrel="lightbox[imagegroup]"と記述します。
imagegroupはグループ名で任意で設定します。

HTML

左下に、画像のキャプションを表示する場合は、a要素にtitle属性を追加します。

HTML

キャプション部分にリンクを付加する場合は、以下のように設定します。

HTML

Lightboxを共通で使用する場合など、階層が異なる場合、以下の変更が必要です。

49、50行目あたりにある以下の部分を変更します。

JavaScript

16、17行目あたりにある以下の部分を変更します。

CSS