サムネイル画像をクリックして実寸サイズ画像を見せる方法はいろいろあるけども、それを実現するもっともスマートなツールと言えば、やはり Lightbox だろう。しかもバージョン２になってその機能はさらに強化された。
何はともあれ、左のサムネイル画像をクリックしてみてほしい。実寸画像を新たにウインドウを開くこともなく、現在のウインドウにオーバレイで表示してくれる。すばらしくスマート。
Lightbox JS v2.0
ダウンロード先は上記のとおり。ツールの作者は Lokesh Dhakar 氏。一部のブラウザでは挙動がぎこちなかったりするが、FireFox や Mozilla なら問題なし。
Lightbox の設置手順はダウンロード先の説明（英文）のとおり。ただしこの説明は Movable Type などのインストールタイプのブログを前提にしているので、FC2などのレンタルブログの場合は若干、改造が必要。
以下、FC2用の設置手順について説明しよう。
ダウンロードした Lightbox2 フォルダ内には css、images、js の３つのフォルダが入っている。しかし FC2ブログのファイルアップロード機能はディレクトリ作成ができないので（つまりフォルダごとアップできないので）これらのフォルダの中身をすべてフラットに並べるしかない。その結果、各ファイルのパスはダウンロード先の説明と少し違って次のようになる（赤字の部分は当ブログを例に書いてあるので書き直してほしい）
<script type="text/javascript" src="http://blog7.fc2.com/a/anti/file/prototype.js"></script>
<script type="text/javascript" src="http://blog7.fc2.com/a/anti/file/scriptaculous.js"></script>
<script type="text/javascript" src="http://blog7.fc2.com/a/anti/file/lightbox.js"></script>
<link rel="stylesheet" href="http://blog7.fc2.com/a/anti/file/lightbox.css" type="text/css" media="screen" />
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(http://blog7.fc2.com/a/anti/file/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left; }
#nextLink { right: 0; float: right; }
#prevLink:hover, #prevLink:visited:hover { background: url(http://blog7.fc2.com/a/anti/file/prev.gif) left 53% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://blog7.fc2.com/a/anti/file/next.gif) right 53% no-repeat; }
// Configuration
//
var fileLoadingImage = "http://blog7.fc2.com/a/anti/file/loading.gif";
var fileBottomNavCloseImage = "http://blog7.fc2.com/a/anti/file/close.gif";
var borderSize = 10;
以上で修正は終わり。
あとは画像をアップロードする際に任意のサイズのサムネイル生成を選択し、エントリ編集ページで下記のように記述すれば完了（この記事に載せた写真を例に）
<a href="http://blog7.fc2.com/a/anti/file/yun_3046.jpg" rel="lightbox" title="Test up"><img src="http://blog7.fc2.com/a/anti/file/yun_3046s.jpg" alt="" border="0"></a>
少し複雑なツールになるとフォルダ構成になっているケースが多いので、FC2のファイルアップロードにも、seesaaブログのようなディレクトリ作成機能が付いてるとラクなのだが…。
