Lightbox2.0を設置してみました。

1.Lightboxをダウンロードする。
http://www.lokeshdhakar.com/projects/lightbox2/←ここからダウンロード。
2008年12月4日現在、バージョン2.04しかダウンロード出来ませんが
ダウンロードファイルURLの「lightbox2.04.zip」を「lightbox2.03.zip」にすれば
2.03をダウンロード出来ます。

2.Lightbox.jsを編集。
64、65行目のファイルパスを変えます。例として私の場合はこうです。

【旧】


var fileLoadingImage = "images/loading.gif";        


var fileBottomNavCloseImage = "images/closelabel.gif";





【新】


var fileLoadingImage = "http://サイトURL/lightbox/images/loading.gif";        


var fileBottomNavCloseImage = "http://サイトURL/lightbox/images/closelabel.gif";

3.ファイルのアップロード。
MTを置いてるフォルダの中に"lightbox"というフォルダを作成し、ダウンロードしたlightboxフォルダの中のcss・images・jsフォルダをそのままアップロード。

4.MovableTypeテンプレートの編集。
ちなみにこのブログはMT4.1です。ヘッダーの部分を編集します。
?タグ内に以下を記述します。

<link rel="stylesheet" href="http://サイトURL/lightbox/css/lightbox.css" type="text/css" media="screen" />


<script type="text/javascript" src="http://サイトURL/lightbox/js/prototype.js"></script>


<script type="text/javascript" src="http://サイトURL/lightbox/js/scriptaculous.js?load=effects"></script>


<script type="text/javascript" src="http://サイトURL/lightbox/js/lightbox.js"></script>

設置は以上で終了。

5.Lightbox使用方法。
<A>タグの属性に「rel="lightbox"」を追加すればＯＫ。
さらに「rel="lightbox[roadtrip]"」とすれば同じトリップの付いたものがグループ化されてグループ内画像でページ切換が出来たりします。

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>





<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>


<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>


<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

以下のサイトを参考にさせていただきました。

Movable Type 備忘録 - サムネイルをLightbox JSで表示してみる
http://bizcaz.com/archives/2006/05/04-024443.php

Lightbox.jsで画像を表示とアップロードの編集:magnet :..
http://magnet.pw8.jp/movabletype/000327.php

Lightboxでアニメーション風に画像拡大 | Googlezon
http://www.googlezon.jp/homepage/56