…ここからが続き

Lightbox JS v2.0の使い方

1. Lightbox 2ダウンロード
2. 解凍したファイルにある「js」「css」「images」フォルダをアプロード。
3. headタグ内に下記ソースを記述

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

変更前のHTMLソース

<p><a href="images/image-1.jpg"><img src="images/thumb-1.jpg" alt="" width="100" /></a></p>

変更後（Lightbox使用）のHTMLソース

<p><a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" alt="" width="100" /></a></p>

上記ソースの用に a タグの中に「rel="lightbox"」と追加するだけで使えちゃいます。尚画像をグループ化にしたい場合は「rel="lightbox[roadtrip]"」と記述していく事で、「rel="lightbox[roadtrip]"」がついた画像達がプレビューされていく感じです。

Lightbox JS v2.0カスタマイズ方法

背景の色を変更（デフォルトでは黒い部分）

lightbox.cssの一番下に記述してある#overlayのbackground-color: #000;となっている「#000」を任意の色に変更する。

画像周りの色を変更（デフォルトでは白い部分）

lightbox.cssの上から4つ目に指定してある#outerImageContainerと下から7つ目に指定してある#imageDataContainerのbackground-colorの色を任意の色に変更。
(変更した場合はCLOSEの画像は白のままなので、この画像を指定した色にあわせて作り直す事)

ボタン系の画像の変更

一番簡単なのが解凍後「images」フォルダに入っている画像の名前と同じに名前にし、上書きする。

ディレクトリの変更

現在「images」に入ってる画像を「images/lightbox/」と変更した場合の説明をします。

1. lightbox.cssにある「background: url(../images/prevlabel.gif)」「background: url(../images/nextlabel.gif)」
2. lightbox.jsにある「fileLoadingImage: 'images/loading.gif',」「fileBottomNavCloseImage: 'images/closelabel.gif',」
3. 1と2であげた箇所の「images」となっている箇所を「images/lightbox/」に変更する。
   例：「background: url(../images/prevlabel.gif)」は「background: url(../images/lightbox/prevlabel.gif)」

追記：2/20 白い枠を消した状態

lightbox.cssに記述されている「#outerImageContainer background-color: #fff;」「#imageDataContainer background-color: #fff;」を削除します。

CLOSEとNEXTとPREVの画像を背景の色に合わせて作り変えました。

追記：5/26 NEXTとPREVの位置を変える

NEXTとPREVが指定してある部分は lightbox.css の16 17行目になります。

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

15%と指定してある部分が縦軸の指定なのでここ下の放置に配置した場合は95%に指定して下さい。

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 95% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 95% no-repeat; }

追記：7/16

image 1 of 5を非表示、NEXTとPREVがある場合は常に表示というリクエストがあったので追記にて変更部分する部分を紹介しておきます。
両方とも触るのは lightbox.css のみで大丈夫です。

image 1 of 5を非表示（24行目）

#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}

の部分を

#imageData #numberDisplay{ display: none;	}

NEXTとPREVがある場合は常に表示（14行目～17行目）

#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

の部分を

#prevLink { left: 0; float: left; background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink { right: 0; float: right; background: url(../images/nextlabel.gif) right 15% no-repeat; }

と記述する事で出来ます。

追記：9/17 拡大表示時の位置を変更する 1（右上に表示）

lightbox.css（1行目）

#lightbox{ position: absolute; right: -63%; z-index: 100; line-height: 0;}

lightbox.js（231行目）

var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 500);

追記：9/17 拡大表示時の位置を変更する 2

左よりで、上からの表示位置を少し下にずらした表示です。
※左下に表示はおそらく出来ないと思います。

lightbox.css（1行目）

#lightbox{	position: absolute; right: 73%; z-index: 100; line-height: 0;}

lightbox.js（231行目）

var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 2);

追記：2010 11/9 キャプションを改行させる

lightbox.js

218行目（変更前）

this.imageArray.push([imageLink.href, imageLink.title]);

218行目（変更後）

var caption = imageLink.lastChild;
this.imageArray.push(new Array(imageLink.getAttribute('href'), caption.innerHTML));

lightbox.css

上記のままだと詰まってる感いっぱいなので、余白を付けたいなら、#imageData #imageDetails に下記要素（padding）を付けてやってください。

padding-bottom:10px;

キャンプション要素をクリック前には表示させたくない場合はその要素に class を指定し .none { display: none; } を指定して下さい。