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
キャプション
左下に、画像のキャプションを表示する場合は、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」ボタンの画像 |