Movable Type 備忘録

サムネイルをLightbox JSで表示してみる

May042006
Author: bzbell
Categories: Customize
Tags: JavaScript, prototype

Next Page: エントリの訂正をカンタンにする
Prev Page: MovableTypeのコメント欄の色を交互に変えてみる

MovableType(ムーバブルタイプ)では、標準で元イメージをサムネイルにしてくれる機能が備わっています。とはいっても、Image::Magickというソフトウェアが必要なようです。つか、レンタル・サーバーでサイト管理している人はあまり気にしなくても良さそう♪

Image::Magickの話は(よく分からないので)さらぁ～と流して、今日はLightbox.jsによるサムネイル・イメージの表示にチャレンジしてみたいと思います。

Lightbox.jsは、サムネイルをクリックすると、元の大きさのイメージを同じウィンドウに表示してくれるJAVAスクリプトです。
ポップアップなどで表示されないし、ページの移動もされず、見た目的にもかなりGOODですよ。

サンプルとして、左のイメージ(わたしの相方)をクリックしてみてください。

Lightbox.jsは、MovableType(ムーバブルタイプ)以外でも使用できます。

今回参考にしたサイトは、magnet:.. 様と、Lightbox JS本家です。

▼Lightbox.js v2.0の入手はこちらから▼
http://www.huddletogether.com/projects/lightbox2/

カスタマイズ方法

まず、Lightbox.jsをダウンロードします。
上記URLから圧縮ファイルをダウンロードします。そして、適当なフォルダに展開してください。

次にjs/lightbox.jsを修正します。
js/lightbox.jsの修正内容は以下の通りです。

62行目
修正前
var fileLoadingImage = "images/loading.gif";		
var fileBottomNavCloseImage = "images/closelabel.gif";
修正後
var fileLoadingImage = "http://●●●.com/lightbox/images/loading.gif";		
var fileBottomNavCloseImage = "http://●●●.com/lightbox/images/closelabel.gif";

各自の環境に合わせて青い字の部分を修正します。

修正したらサーバーにアップロードします。
アップロード先はどこでも構いませんが、ここでは上記例の場所にアップロードするものとして説明します。

まず、index.htmlと同じ場所にlightboxディレクトリを新規作成してください。
そして、そのディレクトリの中にcss、images、jsフォルダをそのままアップロードします。

これでLightboxの設置は完了です。
次にスタイルシートの修正を行います。
わたしは、既存のスタイルシートstyles-site.cssの中にcss/lightbox.cssをインポートするよう、以下のように追加しました。
```
@import url(<$MTBlogURL$>lightbox/css/lightbox.css) screen;
```
各テンプレート内に個別に追加する場合は、以下の1行を<head>～</head>の間に追加します。
```
<link rel="stylesheet" href="<$MTBlogURL$>lightbox/css/lightbox.css" type="text/css" media="screen" />
```
最後にテンプレートを修正します。
修正するテンプレートは、メイン・インデックス、個別アーカイブなど、エントリが表示されるテンプレートが対象となります。
<head>～</head>の間に以下のコードを追加します。
```
<script type="text/javascript" src="<$MTBlogURL$>lightbox/js/prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<$MTBlogURL$>lightbox/js/lightbox.js"></script>
```
追加したら保存して再構築します。

以上で一通りLightbox JSの準備ができました。
Lightbox JSでサムネイル画像を表示させるには、以下のようにします。

<a href="http://●●●.com/image/▲▲▲.jpg"
rel="lightbox"><img src="http://●●●.com/image/▲▲▲-thumb.jpg" width="150" height="200" alt="" /></a>

青い字の部分を付け加えることで、Lightbox JSが実行されるようです。
毎回入力するのが面倒な人は、以下の手順でサムネイル作成時に自動で付け加えることができます。

CMS.pmを編集します。
mt/lib/MT/App/CMS.pmをテキストエディタで開いてください。そして、以下のように修正します。

3604行目
修正前
<a href="$url"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>
修正後
<a href="$url"
rel="lightbox"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>
3608行目
修正前
<a href="$url" ><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>
修正後
<a href="$url"
rel="lightbox"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>

青い字の部分を追加します。
修正したら保存してサーバーにアップロードしてください。

以上で、デフォルトで rel="lightbox" を付加させることができました。
どうですか!? 見栄えいいでしょ♪

では、SEE YOU♪

- 2007.10.07 追記 -

scriptaculous.js の最新バージョンは 2007.10.07 時点で ver1.7.0 ですが、このバージョンでは lightbox2 は正しく動作しませんでした。
いろいろ調べたところ ver1.5.3 までは動作確認済みです。