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

Published: 2008年12月4日Posted in: IT, MovableTypeTags: , , ,

最近ちょくちょく閲覧させてもらってるK’s Labo 3Gさんで
画像をクリックしたら…何て言うんでしょうか、、
スクリーンがびゅいーんって出てきて背景が暗くなって画像だけが大写しになる
感じのやつがかっこよかったので自分のブログにも付けたくなったｗ
なんか色々調べてたらLightboxっていうスクリプトを利用すると簡単にできるらしい。
ので、簡単にできるだろうと思ったらえらい苦労した。
問題は最新版のLightbox2.04のせいだ！いやほんとは設置者のせいかもしれないけど…
結局１つ前のバージョン2.03にすることでなんとか設置できました。
設置手順をメモしておく。


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