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

JavaScript を用いて Web 2.0 ライクな画像ポップアップを表示させる方法について。

世間では Ajax の活用例として紹介されているところもあるみたいですが、厳密に言えばサーバとのXMLデータを用いた対話型Webアプリではないので違うんじゃないかと。。。

まぁ、小言はおいておいて実装方法から。まずは左の画像をクリックしてみて下さい。JavaScript が有効なブラウザ環境であれば、ロードのプログレスバーが表示されたあと、ブラウザにオーバレイする形で画像が表示されると思います。元に戻したいときは、画面のどこかをクリックするか、キーボードの X ボタンを押して下さい。

きちんと表示されない人は、キャッシュに古い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); }