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」を書き換える必要があります。
書き換え方法はこちらをご覧ください。

JavaScriptおよびCSSの読み込み

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

HTML

適用方法

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

HTML

サンプル

グループ化

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

HTML

サンプル1  サンプル2

キャプション

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

HTML

サンプル

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

HTML

サンプル

設置時に異なる階層への対応方法

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

■jsディレクトリ内のlightbox.js

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

JavaScript

■cssディレクトリ内のlightbox.css

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

CSS

ファイル名 説明
loading.gif 画像の読み込み中に表示される画像
closelabel.gif 右下の「CLOSE」ボタンの画像
prevlabel.gif 「PREV」ボタンの画像
nextlabel.gif 「NEXT」ボタンの画像