Lightbox2.0の使い方 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要素にrel="lightbox"を追加します。

サンプル

グループ化

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

サンプル1  サンプル2

キャプション

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

サンプル

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

サンプル

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

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

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

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

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

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

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