備忘録:jquery lightbox plugin for Movable Type

MTの開発用備忘録として

jquery lightbox pluginをMTを利用します。

通常、lightboxだとprototype.jsを使うのが一般的ですが、ほかのJavaScript Frameworkとの共存がうまくできないというエラーに悩まされたので、Frameworkの一本化をする目的で、jQuery版の導入方法を模索しました。

まずは、pluginをダウンロード。

「jquery-lightbox-0.5」というフォルダの中に「css」「images」「js」「photo」というフォルダがあり、このうち「photo」以外の3つのフォルダを、mtディレクトリのmt-staticにアップロード。

次に「js」フォルダにある「jquery.lightbox-0.5.js」ファイルを
編集します。

imageLoading〜のURLを、先程設置した「images」のURLに変更します。

imageLoading:'設置したURL/mt-static/lightbox/images/lightbox-ico-loading.gif',
imageBtnPrev:'設置したURL/mt-static/lightbox/images/lightbox-btn-prev.gif',
imageBtnNext:'設置したURL/mt-static/lightbox/images/lightbox-btn-next.gif',
imageBtnClose:  '設置したURL/mt-static/lightbox/images/lightbox-btn-close.gif',
imageBlank:'設置したURL/mt-static/lightbox/images/lightbox-blank.gif',

例えば「images 」フォルダをアップロードしたURLが以下の場合、

1行目のimageLoadingは下記のようになります。


編集が終了したら、保存して先程の場所に上書きアップロードします。

ヘッダーに以下の内容を書き込みます。

<!-- // lightbox // -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/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" />
<script type="text/javascript">
$(function() {
    $('[rel="lightbox"]').lightBox();
});
</script>

jqueryはgoogleから引っ張ってきたほうが個人的には好きなので、そうしていますが、同梱されているjQueryを使っても問題はありません。
ここで、[rel=”lightbox”]という記述の他に、#gallery aやa[href$=.jpg], a[href$=.gif], a[href$=.png] なんていうことも可能です。
ちなみに、[rel=”lightbox”]という記述をしておくことによって、「LightBox2MT」が活用できます。シンプルなプラグインですが、結構使えますし、LightBoxをかけたくない画像も別途利用可能になるので、あまり詳しくない人でも安心して更新が出来るというメリットもあります。
他にも、いろいろ設定は変えられるみたいなので、必要であれば変えてみるのもいいかもしれません。
参考サイト

• jQuery版LightBoxプラグイン
• MTの画像挿入時に rel=”lightbox”を挿入する「LightBox2MT」プラグイン
• Movable TypeでjQuery lightBoxプラグインを使う