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」を利用してるので、↑の説明と私のブログの実装は一致しません。あしからず。

, , ,