groundwalker.com

ThickBox というリッチなダイアログを表示するための javascript ライブラリがある（ jQuery必須 )。これを使うと写真ギャラリーが簡単に作れていい感じ。

使い方は、まず、ライブラリを読み込んで、

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>

img を a タグでくくって、class="thickbox" 、写真の表題を title に入れれば完成。超簡単。

<a class="thickbox" title="空" rel="gallery1" href="img/1n.jpg"><img alt="" src="img/1s.jpg"/></a>
<a class="thickbox" title="紅葉" rel="gallery1" href="img/2n.jpg"><img alt="" src="img/2s.jpg"/></a>
<a class="thickbox" title="魚" rel="gallery1" href="img/3n.jpg"><img alt="" src="img/3s.jpg"/></a>
<a class="thickbox" title="富士山" rel="gallery1" href="img/4n.jpg"><img alt="" src="img/4s.jpg"/></a>
<a class="thickbox" title="マックグリドル" rel="gallery1" href="img/5n.jpg"><img alt="" src="img/5s.jpg"/></a>

a タグの rel でグループ指定できて、同じグループの画像内で「前へ」「次へ」ナビゲーションができる。

サンプルはこんな感じ
ThickBox sample

ダイアログで表示される文字列が thickbox.js 内に埋め込まれてたりするのがなんだけど、まぁ、thickbox.js もサンプルコードだと思えば問題ない。