Lightbox2の使い方 v2.04

Lightbox

Lightbox2を使ってみた。
簡単に利用できるが、ちょっと注意が必要だったのでメモ。

Lightbox2のダウンロードは下記から。
http://www.huddletogether.com/projects/lightbox2/#download

導入に参考にしたサイト
ゼロからはじめるLightbox 2.0 - 簡単にWebで写真アルバム機能を
http://journal.mycom.co.jp/articles/2007/06/14/lightbox/index.html


ただし、上記の使い方は、Lightboxのバージョン2.03.3であるため、現時点で最新の2.04ではそのままでは利用できない。

具体的には、HTMLへのJavascriptの指定方法。

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

CSSのリンクは、

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

と書かなくてはいけない。

バージョンが上がるたび変わるかもしれないので、梱包されているindex.htmlはチェックした方がよさそう。
英語だけど、実装方法が書いてある。


また、参考だけど、Lightboxを解凍した状態では、それぞれのjs、css、imagesフォルダはLightboxを利用するhtmlファイルなどと同じ階層に設置する設定になっている。
その場合、複数のディレクトリでLightboxを使いたい場合、複数のjs、css、imagesフォルダをそれぞれのディレクトリに設置しなくてはいけない。

サーバー容量が勿体ないし、管理上気持ち悪いので、できればrootで一元管理したい。

その時はjs、css、imagesフォルダはrootに設置してLightboxが読み込む画像（imgesフォルダ）への参照パスを変更する必要がある。
たとえば、
lightbox.js

    fileLoadingImage:        'images/loading.gif',     
    fileBottomNavCloseImage: 'images/closelabel.gif',

上記のままだと、imagesがroot直下にあるので、パスがずれてcloseボタンが表示されない。

    fileLoadingImage:        '/images/loading.gif',     
    fileBottomNavCloseImage: '/images/closelabel.gif',

のようにrootパスで指定する必要がある。