Lightbox系のライブラリは本当にたくさんありますが、
ここでは、定番の元祖Lightboxを使用してみます。

Lightbox 2（デモあり）

http://www.huddletogether.com/projects/lightbox2/

レイアウト構造

HTMLソースをのぞいてみると、クリックをしたときに

• 画面全体を覆う半透明レイヤー（id="overlay"）
• 拡大画像配置レイヤー（id="lightbox"）

がJavaScriptによって描画されるしくみになっています。 また、拡大画像配置レイヤー内では

• 画像の入っているメインエリア（id="outerImageContainer"）
• キャプションの入っているボトムエリア（id="imageDataContainer"）

と、大きく上下に2つ分かれています。 またそれぞれレイアウト用にdivが1つ入れ子になっており、その中に画像などのコンテンツが入る構成になっています。

※JSで生成されたソースを見るときに、やはりFirebugは便利です^^

背景レイヤーを変えてみよう

画面全体を覆う半透明レイヤーですが、デフォルトの黒をそのまま使用している人が多いですが、これもCSSなので、色を変更することができます。
たとえば業種的に暗い印象を与えたくない場合などは、白くホワイトアウトした感じに変更することも可能です。
css/lightbox.cssを編集します。

#overlay{
background-color: #fff,
}

※サンプル1

背景画像のパターン

もちろん、背景画像を使用することもできます。
透過PNGを背景に使ってのグラデーションも綺麗です。

※サンプル2

背景に模様とか入れても面白いかもしれませんね。
サイトの雰囲気によって変えてみましょう。

※サンプル3

角丸四角形のつくりかた

次は拡大画像が表示されるフローティングレイヤーを、角丸にしてみましょう。
カスタマイズはこのような流れになります。

1）角丸画像を用意する。

透過処理をした角丸画像を用意します。これを4箇所で使いまわします。

2）外側のdiv（#outerImageContainer）に背景画像をセットする。

#outerImageContainer{
background: url(../images/r_bg.png) 0 0 no-repeat;
}

左上寄せにします。0 0 は背景配置の数値設定で、left topのことです。

3）内側のdiv（#ImageContainer）に背景画像をセットする。

#imageContainer{
padding: 0;
background: url(../images/r_bg.png) 100% 0 no-repeat;
}

こちらは右上寄せです。0 0 は、right topのことです。またpaddingは0にして、余白は内容物で調整します。

4）内容物（画像）のマージンを調整し、白背景をセットする。

#imageContainer img{
margin: 10px 0;
padding: 0 10px 10px;
background-color: #fff;
}

5）（キャプションエリアも同様に行う）

キャプション部分も外側（#imageDataContainer）内側（#imageData）のレイアウトdivに、それぞれ左下寄せ、右下寄せで背景配置を行います。同様に、余白調整は内容物のほうで行います。

これで角丸の四角形ができました！
ここまでCSSと画像だけの修正です。HTMLソースやJSはいじっていません。
（角丸がわかりやすいように背景を暗めにしました）

※サンプル4

でも…
サンプルをご覧いただくとわかると思うのですが、このカスタマイズでは、ソースの変更なく最低限のHTMLだけで変更しているために以下の問題点があります。。

• 角丸に画像を使用しているために、画像の横幅に制限がある。（このサンプルでは480px～960px。角丸画像のサイズに依存します。5枚目の写真は横幅が狭いので、うまく角丸表示されません）
• IE5はNG
• 次の/前の画像を見たときのリサイズする動きがかっこいくない
• （背景がないため）ローディング画像がなんだかずれているように見える！＞＜

CSSでの角丸矩形のつくりかたとしては、よくあるやりかたなのですが、
せっかくのモーションのかっこよさが半減になってしまいました。
もうちょっとなんとかしたいですねえ。
ということで、次回につづきます。