Lightbox2を導入する

まずはファイルのアップロード

後々のメンテナンスや移転等を考慮して、こういった特殊効果はstyleフォルダにできるだけひとまとめにするようにしています。
私の場合はこんな感じのディレクトリ構造にしています。

<$MTBlogURL$>
    └[r34style]
        └[script]
            ├[lib]─prototype.js
            ├[lightbox]┬lightbox.css
            │    │    └lightbox.js
            │    └[images]┬
            │              ├
            │              ├
            │
            └[src]┬scriptaculous.js
                   ├

次に各テンプレートのヘッダ部分の編集。

スタイルシートを読み込む設定を追加。

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

JavaScriptを読み込む設定を追加。順番が前後すると動作しないので注意が必要。

<script type="text/javascript" src="<$MTBlogURL$>style/script/lib/prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>style/script/src/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<$MTBlogURL$>style/script/lightbox/lightbox.js"></script>

そして、lightbox.jsの内容を変更。

65行目、204行目のloading.gifの設置場所を指定。トップページとアーカイブページなど異なるディレクトリのファイルから動作させるので、念のためhttp://からのURLで表示。

同様に66行目、217行目のcloselabel.gifの設置場所を指定。（赤色が追加箇所）

65行目：var fileLoadingImage = "http://ブログのURL/style/script/lightbox/images/loading.gif";
66行目：var fileBottomNavCloseImage = "http://ブログのURL/style/script/lightbox/images/closelabel.gif";
204行目：<img src="http://ブログのURL/style/script/lightbox/images/loading.gif">
217行目：<img src="http://ブログのURL/style/script/lightbox/images/close.gif">

lightbox.cssの内容も変更します。（赤色が追加箇所、青色が削除箇所）

49行目のblank.gif、54行目のprevlabel.gif、55行目のnextlabel.gifです。

49行目：background: transparent url(http://ブログのURL/style/script/lightbox../images/blank.gif) no-repeat; /* 
54行目：#prevLink:hover, #prevLink:visited:hover { background: url(http://ブログのURL/style/script/lightbox../images/prevlabel.gif) left 15% no-repeat; }
55行目：#nextLink:hover, #nextLink:visited:hover { background: url(http://ブログのURL/style/script/lightbox../images/nextlabel.gif) right 15% no-repeat; }

これをFTPで上書アップロードすればOK・・・のはずです。

Lightboxの古いバージョンを使っている場合は、スクリプトを削除する必要があります。
このサイトのLightboxはまだ旧バージョンのままです。

【9月29日追記】
哲やんさんからいただいたコメントを参考にMovableType4.01でrel="lightbox"を追加する設定を適用しました。
左はその設定で貼り付けた写真です。

哲やんさんどうもありがとうございました。

【2008年1月28日追記】
MT4.01でrel属性を追加する解説はこちら
MT4.1でrel属性を追加する解説はこちら