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

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>

参考:http://www.morishima.com/masahiro/blog-archives/000969.html

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

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


CSS だけで Mac OS X の Dock 風ナビゲーション

itworks – OSX Dock風Javascript
マウスからの距離に応じて画像サイズを変える(MacOS Xのドック)

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

Similar Posts:

カテゴリー: A:Diary パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です