[JS]画像をオーバーレイで拡大表示させる「Lightbox 2.05」の使い方

Javascript・jQuery

2012.07.07

Lightboxは昔からメジャーなプラグインなので、今更説明も不要かもしれませんが…。

現在、Lightboxのバージョンは2.5系になっているものの、2.05を使わざるを得ない事情が色々ありますため（その辺は記事の最後に書いてます）、改めてLightbox 2.05の設置方法をまとめました。

Lightbox 2.05の設置
lightbox.jsファイルの確認・編集
Lightbox 2.05 の使い方
1. 複数の画像をグループとして扱う
Lightbox 2.5系との違いについて

Lightbox 2.05の設置

<head>内に以下のように記述します。

<link href="./lightbox.css" type="text/css" rel="stylesheet">
<script src="./prototype.js"></script>
<script src="./scriptaculous.js?load=effects,builder"></script>
<script src="./lightbox.js" type="text/javascript"></script>

バージョン2.05はprototype.jsを使います。

lightbox.jsファイルの確認・編集

画像を拡大表示させる際のローディング画像が表示されない…。
PREV、NEXT、CLOSE などの各種ボタンが表示されない…。

ということにならないために、lightbox.jsファイル内のfileLoadingImageとfileBottomNavCloseImageのパスが正しいことを確認しておきます。

LightboxOptions = Object.extend({
    fileLoadingImage:        'images/loading.gif',     
    fileBottomNavCloseImage: 'images/closelabel.gif',

LightboxOptions = Object.extend({

fileLoadingImage: 'images/loading.gif',

fileBottomNavCloseImage: 'images/closelabel.gif',

Lightbox 2.05 の使い方

画像をオーバーレイで拡大表示したリンクタグにrel="lightbox"を記述します。

<a href="./images/lightbox01-s.jpg" re;="lightbox">
	<img src="./images/lightbox01-l.jpg">
</a>

</a>

複数の画像をグループとして扱う

画像をオーバーレイで拡大表示させ、「NEXT」「PREV」のリンクで複数枚の画像を表示できるようにするには、リンクタグにrel="lightbox[グループ名]"を指定します。

<a href="./images/lightbox01-s.jpg" re;="lightbox[group1]">
	<img src="./images/lightbox01-l.jpg">
</a>
<a href="./images/lightbox02-s.jpg" re;="lightbox[group1]">
	<img src="./images/lightbox02-l.jpg">
</a>
<a href="./images/lightbox03-s.jpg" re;="lightbox[group1]">
	<img src="./images/lightbox03-l.jpg">
</a>
<a href="./images/lightbox04-s.jpg" re;="lightbox[group1]">
	<img src="./images/lightbox04-l.jpg">
</a>

</a>

</a>

</a>

</a>

※[グループ名]の部分は任意の名称で良いです。

以下に簡単なデモを用意してみました。

Lightbox 2.05 のデモ

Lightbox 2.5系との違いについて

現在、Lightboxはバージョン2.5系になっています。

今回紹介させていただいたバージョン2.05とはオーバーレイで画像を拡大表示できる点は共通しているものの、以下のような違いがあります。

「Prototype」べースか「jQuery」べースか

大きな違いは、2.5系になるとjQueryベースで動くという点です。

個人的には過去にPrototypeとjQueryのコンフリクトで泣かされたので、2.5系だとjQueryで統一できるのは嬉しいです。

html5shiv.jsを使うとIE8以下ではLightbox2.5系が正常に動かない

HTML5のIE8対応スクリプトであるhtml5shiv.jsを使っていると、Lightbox2.5がバージョン8 以下のIEではまともに動いてくれない…(´・ω・｀)

html5shiv.jsを外せば動いてくれますが、「レイアウトが激崩れ!!」になる場合は、素直に 2.05 のバージョンを使うか、他のプラグインで代用する方が良いのかも。