サムネイルをクリックすると、ぼわーんぼわーんて出てきて、
何枚か写真があると、NEXTとかPREVとかで連続してみることができるのです。

オーバーレイを施しているから、写真やイラストを右クリ保存できないし。
持ち出し対策にも使えますね。

■LightboxJS2.0←配布サイト（英語）

どんなんになるのかの例は、↑のEXAMPLEで見てください。
上はひとつずつ開いて閉じるタイプ。下は、いくつかの画像を続けて見られるタイプ。
（記述仕方でどちらにも切り替えられます）

□セットアップ。
１・
使いたいページの＜head＞～＜/head＞内に、
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
と、
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
を入れる。

２・
配布サイトの下のほうにあるDOWNLOADから、DLする。（zipファイル）
lightbox.cssを開いて　prev.gif、nextgifのパスを修正する。

#prevLink:hover, #prevLink:visited:hover { background: url(http://www.xxx.com/images/prevlabel.gif) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url(http://www.xxx.com/images/nextlabel.gif) right 15% no-repeat; }

http://～のパスを書くと確実。

lightbox.jsを開き、
loading.gifとclose.gifのパスを修正。

//

// Configuration

//

var fileLoadingImage = "http://www.xxx.com/images/loading.gif";

close.gifは、imgタグの中にひとつ。Ctrl+Fで探してください；

３・
index.html
└/css/
└/js/
└/images/

と配置する。（トップディレクトリの直下）
※ 私なんかは、すでにimagesディレクトリがあったのでそこの中にぶちまけちゃいました（笑）

□使い方。
１・
＜a href="（表示させたい画像）" rel="rightbox"＞＜img src="（サムネイル）"＞＜/a＞
と、リンク先にrel="rightbox"を追加。

２・
写真のグループをNEXTやPREVで数枚見せる場合は、
上記の場所にrel="rightbox[（グループ名）]"と入れる。

OK。