アンチブログフォトログ・ツール Lightbox JS 2

フォトログ・ツール Lightbox JS 2

サムネイル画像をクリックして実寸サイズ画像を見せる方法はいろいろあるけども、それを実現するもっともスマートなツールと言えば、やはり Lightbox だろう。しかもバージョン２になってその機能はさらに強化された。
何はともあれ、左のサムネイル画像をクリックしてみてほしい。実寸画像を新たにウインドウを開くこともなく、現在のウインドウにオーバレイで表示してくれる。すばらしくスマート。

Lightbox JS v2.0

ダウンロード先は上記のとおり。ツールの作者は Lokesh Dhakar 氏。一部のブラウザでは挙動がぎこちなかったりするが、FireFox や Mozilla なら問題なし。

Lightbox の設置手順はダウンロード先の説明（英文）のとおり。ただしこの説明は Movable Type などのインストールタイプのブログを前提にしているので、FC2などのレンタルブログの場合は若干、改造が必要。

以下、FC2用の設置手順について説明しよう。

ダウンロードした Lightbox2 フォルダ内には css、images、js の３つのフォルダが入っている。しかし FC2ブログのファイルアップロード機能はディレクトリ作成ができないので（つまりフォルダごとアップできないので）これらのフォルダの中身をすべてフラットに並べるしかない。その結果、各ファイルのパスはダウンロード先の説明と少し違って次のようになる（赤字の部分は当ブログを例に書いてあるので書き直してほしい）

<head>～</head>への記述

<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" />

lightbox.cssの修正（赤字の箇所）

#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; }

lightbox.jsの修正（赤字の箇所）

// 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ブログのようなディレクトリ作成機能が付いてるとラクなのだが…。

2006.04.12 | ブログツールあれこれ | comments : 996 | trackbacks : 7

Comment

FC2 Hack!!!

わー、FC2ブログでこんなことができるんですね！
すごいです☆(・∀・)

| 2007-01-03 10:57:00 |
浜村拓夫 #tpxjpeMs
URL
[ 編集 ]

John

nXLSK8 304fgbmc953czo

| 2007-10-02 04:54:15 |
nXLSK8 304fgbmc953czo #-
URL
[ 編集 ]

John

4OGfZx 360dfv923bf

| 2007-10-03 09:24:20 |
4OGfZx 360dfv923bf #-
URL
[ 編集 ]

John

Esqoe4 dfb40b034dfgb932

| 2007-10-03 14:11:52 |
Esqoe4 dfb40b034dfgb932 #-
URL
[ 編集 ]

John

maturepost <a href=" http://weblog.xanga.com/joey_86/616132454/maturepost.html ">maturepost</a> <a href=" http://weblog.xanga.com/joey_86/616132717/maturewomen.html ">maturewomen</a> <a href=" http://weblog.xanga.com/joey_86/616132862/momandsonsex.html ">momandsonsex</a>

| 2007-10-04 00:46:06 |
maturepost <a href= #-
URL
[ 編集 ]

John

monstercocks <a href=" http://weblog.xanga.com/joey_86/616133608/monstercocks.html ">monstercocks</a> <a href=" http://weblog.xanga.com/joey_86/616133797/myadultspace.html ">myadultspace</a> <a href=" http://weblog.xanga.com/joey_86/616133941/myfirstsexteacher.html ">myfirstsexteacher</a> <a href=" http://weblog.xanga.com/joey_86/616134319/mygaydar.html ">mygaydar</a> <a href=" http://weblog.xanga.com/joey_86/616134601/nifty-erotic-gay-archives.html ">nifty erotic gay archives</a>

| 2007-10-04 07:07:55 |
monstercocks <a href= #-
URL
[ 編集 ]

The erectile dysfunction drug http://www.viagracare.com viagra which is a must sought after by impotency afflicted people throughout the world has shown its multi-benefits by reducing the blood pressure levels in people suffering from Chronic Obstructive Pulmonary Diseases and has been also approved by the FDA as a suitable treatment for the same. So, from now on after you http://www.viagracare.com buy viagra online, you can not only treat your erectile dysfunction but also cure your pulmonary blood pressure. Hence, what is the point in waiting to http://www.viagracare.com buy viagra? Get hold of Viagra through http://www.viagracare.com viagra online and resume your war against erectile dysfunction. The most obvious advantage gained by buying Viagra from a suitable internet source is that if you buy Viagra online, http://www.viagracare.com cheap viagra is the ultimate product that is delivered at your doorstep.