Movable TypeでjQuery lightBoxプラグインを使う

以前に書いた「ブログ簡単パワーアップ Movable Type4 スーパーカスタマイズテクニック」という本の中で、Liteboxを使って画像を表示する方法を紹介しました。
この件に対し、「Movable Type 5でLiteboxを使うにはどうすれば良いのか」というご質問をいただきました。

Liteboxはprototype.jsベースのJavaScriptですが、現在ではjQueryを使うことが多いかと思います。
そこて、Liteboxの代わりに、jQueryのlightBoxプラグインを使う方法を紹介します。
なお、クラシックブログテーマを使ってカスタマイズを行いますので、その他のテーマをお使いの方は、カスタマイズ先のテンプレート等を適宜読み変えてください。

1.jQuery lightBoxプラグインのダウンロード

まず、以下のリンクからjQuery lightBoxプラグインをダウンロードします。

jQuery lightBox plugin

ダウンロードが終わったら、そのZipファイルを解凍しておきます。

2.jQuery lightBoxプラグインのアップロード

次に、jQuery lightBoxプラグインを、ご自分のMovable Type環境にアップロードします。

Movable Typeのインストール先にある「mt-static」ディレクトリの中に、「lightbox」というディレクトリを作ります。
そして、先ほど解凍しておいた中から、「css」「images」「js」の3つのフォルダを、上で作った「lightbox」ディレクトリの中にアップロードします。

3.「HTMLヘッダー」テンプレートモジュールの書き換え

jQuery lightBoxプラグインを使うには、まずHTMLのヘッダー部分に、lightBoxプラグインのJavaScriptとスタイルシートを読み込む行を追加します。
クラシックブログテーマだと、ブログの「HTMLヘッダー」テンプレートモジュールの最後に以下を追加すれば、lightBoxプラグイン関係のファイルを読み込むことができます。 

<script type="text/javascript" src="<$mt:StaticWebPath$>jquery/jquery.min.js"></script>
<script type="text/javascript" src="<$mt:StaticWebPath$>lightbox/js/jquery.lightbox-0.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="<$mt:StaticWebPath$>lightbox/css/jquery.lightbox-0.5.css" media="screen" />

4.「バナーフッター」テンプレートモジュールの書き換え

最後に、HTMLの最後の方に、jQuery lightBoxプラグインを実行するための処理を追加します。
クラシックブログテーマだと、ブログの「バナーフッター」テンプレートモジュールの最後に以下を追加すれば、lightBoxプラグインを実行することができます。 

<script type="text/javascript">
$(document).ready(function() {
    $('#alpha a:has(img)').lightBox({
        imageBlank: '<$mt:StaticWebPath$>lightbox/images/lightbox-blank.gif',
        imageLoading: '<$mt:StaticWebPath$>lightbox/images/lightbox-ico-loading.gif',
        imageBtnClose: '<$mt:StaticWebPath$>lightbox/images/lightbox-btn-close.gif',
        imageBtnPrev: '<$mt:StaticWebPath$>lightbox/images/lightbox-btn-prev.gif',
        imageBtnNext: '<$mt:StaticWebPath$>lightbox/images/lightbox-btn-next.gif'
    });
});
</script>