[JS]画像をオーバーレイで拡大表示させる「Lightbox 2.05」の使い方
スポンサード
PREV、NEXT、CLOSE などの各種ボタンが表示されない…。
ということにならないために、lightbox.js ファイル内の
以下に簡単なデモを用意してみました。
Lightbox 2.05 のデモ
今回紹介させていただいたバージョン 2.05 とはオーバーレイで画像を拡大表示できる点は共通しているものの、以下のような違いがあります。
個人的には過去にPrototype と jQuery のコンフリクトで泣かされたので、2.5系だと jQuery で統一できるのは嬉しいです。
html5shiv.js を外せば動いてくれますが、「レイアウトが激崩れ!!」になる場合は、素直に 2.05 のバージョンを使うか、他のプラグインで代用する方が良いのかも。
Lightbox 2.5 の設定方法や動かし方は こちら の記事でも紹介させていただいていますので、合わせて参考にしてみてください。
スポンサード
Lightbox は昔からメジャーなプラグインなので、今更説明も不要かもしれませんが…。
現在、Lightbox のバージョンは 2.5 系になっているものの、2.05 を使わざるを得ない事情が色々ありますため(その辺は記事の最後に書いてます)、改めて Lightbox 2.05 の設置方法をまとめました。
目次
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',
Lightbox 2.05 の使い方
画像をオーバーレイで拡大表示したリンクタグにrel="lightbox"
を記述します。<a href="./images/lightbox01-s.jpg" re;="lightbox"> <img src="./images/lightbox01-l.jpg"> </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>※[グループ名]の部分は任意の名称で良いです。
以下に簡単なデモを用意してみました。
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 のバージョンを使うか、他のプラグインで代用する方が良いのかも。
バージョンによる違いのまとめ
バージョン | ベース | IEの対応具合 |
---|---|---|
2.05 | prototype.js | IE6〜IE8 でも動く |
2.5 系 | jQuery | html5shiv.js 利用時には IE8 以下では正常に動かない模様… |
Lightbox 2.5 の設定方法や動かし方は こちら の記事でも紹介させていただいていますので、合わせて参考にしてみてください。
スポンサード
コメント