TON Technology Preview

まず、リンク先の画像が表示された時の HTML の構造ですが、lightbox.js の中身を見ると、丁寧にコメントで構造を書いてくれています。

<div id="overlay"></div>
<div id="lightbox">
  <div id="outerImageContainer">
    <div id="imageContainer">
      <img id="lightboxImage">
	<div style="" id="hoverNav">
	  <a href="#" id="prevLink"></a>
	  <a href="#" id="nextLink"></a>
	</div>
	<div id="loading">
	  <a href="#" id="loadingLink">
	    <img src="images/loading.gif">
	    </a>
	</div>
      </div>
  </div>
  <div id="imageDataContainer">
    <div id="imageData">
      <div id="imageDetails">
	<span id="caption"></span>
	<span id="numberDisplay"></span>
      </div>
      <div id="bottomNav">
	<a href="#" id="bottomNavClose">
	  <img src="images/close.gif">
	  </a>
      </div>
    </div>
  </div>
</div>

これを見れば、CSS が分かる人にとっては、lightbox.css を弄るのは簡単なものです。色を白基調から自分のサイトに合わせるのもいいでしょう。

と言うわけで、僕はこんな感じにしてみました（ソース）。このサイトの配色であるピースネイビーを背景色にして、Close 画像を差し替えました。

それ以外にも、複数の画像をセットにした場合の特徴的なナビゲーションを分かりやすくするために、初めから半透明で表示しておいたのと、:before および :after疑似要素と content プロパティによる説明を付属しておきました。content プロパティは非常に便利で強力なんですが、IE が対応しておらず（多分 IE7 でも対応しないっぽいです。）、無くても問題ない内容のレベルでとどめて置かなければならないのが勿体ないです（とはいえ、大事な情報を content で生成するのは間違っていますが）。

ちなみに、content を用いた部分のソースはこんな感じです。

#imageData #caption:before {
    content: "Title: ";
    background-color: transparent;
    color: #eee;
}
#imageData #numberDisplay:after {
    content: "\A Press \"N\" key to next, and \"P\" key to previous";
    background-color: transparent;
    color: #eee;
}

\A による改行コード挿入は、現行の Opera 8.54 では大丈夫でしたが、Firefox 1.5.0.3 では解釈してくれませんでした。しかし、そこまで気にしだしたら正直スクリプト自体を弄った方が賢いと思うので、気にしないのが吉です。それでなくとも、content プロパティは十分優秀です。Safari はどうなのかな？iCapture という便利なサイトはあるけど、Lightbox JS の動作は分からないですしね。まぁ、Mac 持ってるんですけどね。

他に、Lightbox JS をこう弄ったら楽しいという話があれば教えて欲しいです。