Movable TypeでLightbox JSを試してみる

Lightbox.jsは、サムネイルをクリックすると、元の大きさのイメージを同じウィンドウに表示してくれるJAVAスクリプトで、ポップアップでもなく別ウィンドウでもなくなかなかええ感なので
まぁ、今の流行りということで試してみる。

　←　クリックしてみ！

まずはLightbox.js v2.0を入手
http://www.huddletogether.com/projects/lightbox2/　からLightbox.jsをダウンロードし展開

■ js/lightbox.js の編集
49行目 fileLoadingImage: 'images/loading.gif',
50行目 fileBottomNavCloseImage: 'images/closelabel.gif',
　↓
49行目 fileLoadingImage: 'http://www.domainname.com/lightbox/loading.gif',
50行目 fileBottomNavCloseImage: 'http://www.domainname.com/lightbox/closelabel.gif',

バーチャルドメインを使っているのでどのドメインからも１つの Lightbox.js v2.0 を使いまわせるように絶対パスで記述してみます

■ lightbox の配置
/virtual/domainname.com/lightbox へ配置
　lightbox
　├─css
　│ └─lightbox.css
　├─images
　│ ├─bullet.gif
　│ ├─close.gif
　│ ├─closelabel.gif
　│ ├─donate-button.gif
　│ ├─download-icon.gif
　│ ├─image-1.jpg
　│ ├─loading.gif
　│ ├─nextlabel.gif
　│ ├─prevlabel.gif
　│ ├─thumb-1.jpg
　│ └─Thumbs.db
　├─index.html
　└─js
　 ├─builder.js
　 ├─effects.js
　 ├─lightbox.js
　 ├─prototype.js
　 └─scriptaculous.js

■ /etc/httpd/conf/vhost.conf にエイリアスの追加
[root@sv22 ~]# vi /etc/httpd/conf/vhost.conf
Alias /lightbox/ "/virtual/domon.jp/lightbox/"
を追加

■ Apache の再起動
[root@sv22 ~]# /etc/rc.d/init.d/httpd restart
httpd を停止中: [ OK ]
httpd を起動中: [ OK ]

■ Movable Type - スタイルシート の設定
＜デザイン＞→＜テンプレート＞→＜スタイルシート(メイン)（styles.css）＞に
@import url(http://www.domainname.com/lightbox/css/lightbox.css) screen;
を追加
＜デザイン＞→＜テンプレート＞→＜メインページ（index.html）＞に
＜script src="http://www.domainname.com/lightbox/js/prototype.js" type="text/javascript">
＜script src="http://www.domainname.com/lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript">
＜script src="http://www.domainname.com/lightbox/js/lightbox.js" type="text/javascript">
を追加

追加したら保存して再構築します。

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

のように aリンクの最後に rel="lightbox" を追加

おっ！でけた！