Lightbox2.5~2.7の使い方 lightbox2.x

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

公式サイト

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

ダウンロードと設置

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

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

JavaScriptおよびCSSの読み込み

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

HTML

適用方法

a要素に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」ボタンの画像