Lightbox JS v2.0でサムネール画像をDock風にカスタマイズ

先日導入した
Lightbox JS v2.0をもう少しカスタマイズしてみた。

lightbox.cssに以下を追加。

img.lightbox-img{
border: 1px solid #000000;
vertical-align:top;
}

img.lightbox-img:hover{
width:90px;
height:90px;
}

サムネール表示を以下のように変更。「class=”lightbox-img”」を追加しています。

<a href=”表示させたい画像.jpg” rel=”lightbox[グループ名]” title=”写真説明文”>
<img class=”lightbox-img” alt=”0″ src=”サムネール画像.jpg” width=”**” height=”**” />
</a>

オンマウスで拡大するときのオーバーフロー処理をどうすればいいのか分からないのでちょっとみっともないけれど、少しはOSXのDock風になったかな。

（追記）
hoverで画像サイズを指定しても、IE6ではうまく表示されなかった・・・。
構文的にはあっているはずなんだが、例によってIEのCSSまわりの実装のせいですね。

このあたり、特に「CSS だけで Mac OS X の Dock 風ナビゲーション」はシンプルで良かったのだけれども、サムネイル画像をずらずら並べたソースに適用すると、右端の画像が押し出されて次列の左端にいっちゃったりして、導入断念。