Lightbox2.5~2.7の使い方

Lightbox2.5~2.7の使用方法をご紹介しています。
Lightbox2.5~2.7は別ウィンドウ(ポップアップ)ではなく、ウィンドウ内で画像や写真などをモーダルウィンドウとして表示するJavaScriptライブラリです。
Lightbox2ではprototypeを利用していましたが、lightbox2.5以降ではjQueryを利用するようになりました。

公式サイト

  • ※ このライブラリは、jQueryが別途必要です。
  • ※ ボタンなど透明pngを使用しているためIE6では一部表示が異なる場合や動作しない場合があります。
  • ※ Lightbox2.6以降ではjQueryが1.10.2未満のバージョンだと正常に動作しない場合があります。

ダウンロードと設置

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

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

JavaScriptおよびCSSの読み込み

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

HTML

適用方法

a要素にモーダルウィンドウで表示する画像をhref属性を設定、さらにrel="lightbox"を追加します。

HTML

サンプル

グループ化

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

HTML

サンプル1  サンプル2

キャプション

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

HTML

サンプル

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

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

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

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

JavaScript

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

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

CSS

loading.gif 画像読み込み中に表示される画像
close.png 右下の「CLOSE」ボタンの画像
prev.png 「PREV」ボタンの画像
next.png 「NEXT」ボタンの画像