サムネイル画像を拡大表示するcoolな方法が無いものかと探していたら、色々出てきたのでメモ。

lightbox.js

画像をクリックすると拡大表示、表示された画像をクリックすると元に戻る。
<a>タグを使用しているので、javascript を切ってある環境でも拡大画像を表示することが可能。

scaleeffect.js

画像をクリックするとスケールエフェクトしながら拡大表示。
もう一度クリックすると画像を消去。
javascript を切ってある環境だと使用できないのが残念。
HTMLも不自然になるし…元のスクリプトを書き直せば何とかなるかな。
スケールエフェクトは処理的に重いので、一昔前のマシンだと表示に難あり。

Live Thumbnail

クリックすると、その場で画像を拡大表示。
もう一度クリックすると画像を縮小表示。
画像脇のレイアウトが崩れるが、見ていて面白い。
これも lightbox.js 同様<a>タグを使用しているので、javascript を切ってある環境でも拡大画像を表示することが可能。
scaleeffect.js同様、スケールエフェクトは処理的に重いので、一昔前のマシンだと表示に難あり。

CSS Image Pop-up

Luckey bag::blogで紹介されていたCSSオンリーで拡大画像を表示させる方法。
画像の上にマウスを乗せると拡大表示、外せば元に戻る。
hover を使うとは…目から鱗だ。
これなら、クライアントの javascript の on/off を気にしなくても良いな。
ただし、拡大画像は隠れているだけなのでページが重くなってしまう。
あと、CSSで画像サイズを指定しているので汎用性が無い。

結論：lightbox.js がカッコいいし、不自然なHTMLを書かなくても良いので、こいつを採用しよう。

共同執筆者に連絡
そんなわけで、サムネイル->拡大画像のような記事を書くときは以下のようにしてくれ。

<a href="large.jpg" rel="lightbox" title="画像のタイトル">
  <img src="thumbnail.jpg" alt="画像のタイトル" class="pict" />
</a>