Lightbox JS で画像をポップアップ

きちんと表示されない人は、キャッシュに古いCSSが残っている可能性があるので、ブラウザをリフレッシュして下さい。

実装方法は実に簡単。というのも、こちらのサイトで配布してあるファイルを拝借するだけでほとんど終わるので・・・。基本的に本家にチュートリアルが載っているのでそちらを参照して下さい。

以下、Movable Type における設置時の注意点だけ。

lightbox.js

var loadingImage = 'loading.gif';
var closeButton = 'close.gif';

の部分を、各自の環境に合わせてパスを変更する。フルパス指定する場合は、

var loadingImage = 'http://www.proustcafe.com/images/loading.gif';
var closeButton = 'http://www.proustcafe.com/images/close.gif';

みたいに。MTだとアーカイブ関係のファイルの階層が異なるので要チェック。

lightbox.css

#overlay{ background-image: url(overlay.png); }

* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}

これも同様に、overlay.pngのパスを正しく指定する。

なお、毎回アップロードした画像のimgタグに「rel="lightbox" title="my caption"」を記載するのがめんどくさいという人は、MT のインストールフォルダにある下記のファイルを編集しましょう。

ルート > lib > MT > App > CMS.pm

<a href="$url"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>

ここを、

<a href="$url" rel="lightbox" title="" ><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>

みたいにすればOKです。

以上です。CSSはサイトのデフォルトCSSに組み込んでもいいでしょう。ほんの数行なので。

なお、一点だけ問題点があるとすれば、本家で使用されているCSSをそのまま用いると、W3C CSS Validator でチェックした時に invalid になってしまうということです。これについては、こちらのサイトで解決方法が提案されているので、参考にして下さい。

＃写真はラワグの世界遺産、サン・オウガスチン教会

Lightbox JS
http://www.huddletogether.com/projects/lightbox/
Renegade Zen: Valid Lightbox JS Image Viewer
http://www.renegadezen.com/blog/article/79/valid-lightbox-js-image-viewer

June 26, 2006 追記
現在、当ブログでは「Lightbox JS v2.0」を利用してるので、↑の説明と私のブログの実装は一致しません。あしからず。

tech, blog, CSS, JavaScript