Movable TypeのサイドバーのアイテムをLightboxで開くようにする

MovableTypeで構築されたブログでデフォルトのテンプレートを使うとブログのトップページのサイドバーにアイテムのアイコン一覧が表示されます。画像をクリックするとその画像がブラウザに表示されます。

ブラウザで開くと面倒くさくないですか？他の画像を見たい場合はブラウザの「戻る」ボタンを押さないとならないですし、何をするにも戻らないとならなくなってしまいます。

なので、今時なのでLightboxで開くようにしたいと思います。

jQueryを読み込む様にする
Lightboxに必要なファイルを読み込むようにする
アイテム部分のテンプレートを編集する

上記の3つの作業をします。

jQueryはGoogleのライブラリーを使います。ブログのインデックステンプレートに読み込まれているヘッダーテンプレートモジュールにGoogle Hosted Libraries - Developer's GuideからコピーしたjQueryの<script>タグをペーストします。過去の記事はこちらです→Google Hosted Libraries - Developer's Guide - jQueryを使えるようにする

Lightboxは公式サイトからダウンロードします。公式サイト→http://lokeshdhakar.com/projects/lightbox2/
ダウンロードしたzipファイルを解凍して出来たlightboxフォルダをFTPソフトでアップロードしてlightbox-2.6.min.jsとlightbox.cssを読み込むようにヘッダーテンプレートモジュールを編集します。

今回追加した3行は以下の通りです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- LightBoxここから -->
<script src="https://www.drivemenuts.com/js/lightbox/js/lightbox-2.6.min.js"></script>
<link rel="stylesheet" href="https://www.drivemenuts.com/js/lightbox/css/lightbox.css" type="text/css" />
<!-- LightBoxここまで -->

jsフォルダの中にcssファイルがある状態になってしまってますが、lightboxでまとめておいた方がいいかなと言うことでこのままにします。

続いてアイテムの一覧を書き出しているアイテムウィジェットテンプレートを編集します。以下はデフォルトのテンプレートです。

<li class="item">
<a class="asset-image" href="<$mt:AssetURL$>">
<img alt="<$mt:AssetLabel$>" src="<$mt:AssetThumbnailURL height="70" square="1"$>" width="70" height="70" title="<$mt:AssetLabel$>" class="asset-img-thumb" />
</a>
</li>

<a>タグに"data-lightbox属性"を追加します。

<a class="asset-image" href="<$mt:AssetURL$>">
<a class="asset-image" href="<$mt:AssetURL$>" data-lightbox="items">

<a>タグに「data-lightbox="items"」を追加しました。このdata-lightbox属性の値が同じもは同じグループとして認識されるので、連続して画像を見ることが出来るようになります。グループにしたくない場合は<$mt:AssetID$>などを入れてあげればいいと思います。

メインページテンプレートの再構築後に画像をクリックすると、画像がフワッと表示されるようになります。