• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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 ファイル内の fileLoadingImagefileBottomNavCloseImage のパスが正しいことを確認しておきます。
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.05prototype.jsIE6〜IE8 でも動く
2.5 系jQueryhtml5shiv.js 利用時には
IE8 以下では正常に動かない模様…

Lightbox 2.5 の設定方法や動かし方は こちら の記事でも紹介させていただいていますので、合わせて参考にしてみてください。



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください