「サムネイル画像をクリックすると大きな画像を同ブラウザ上で表示する」ってサイトをよく見るようになりました。
クリックすると別ウィンドウではなく、サムネイルの上に画像ボックスが表示するやつです。

別ウィンドウが開くっていうのは嫌われる傾向にありますし、なによりかっこいいですよねｗ

たいていはPrototype.jsとLightBoxというライブラリを使用しています。
LightBoxってのがWeb2.0っぽい表示をさせるライブラリです。

Prototype.jsはファイルサイズが大きいためにLightBoxを使用するために他の必要ファイルも読み込むと100KB以上になってしまいます。
まぁ、その分いろいろ便利な機能もついてるんですが、ちょっと重すぎ……って思いますね。Javascriptが全部読み込まれる前にサムネイルをクリックすると、思ったように動作してくれませんので遅い回線を使ってる方にとってはイライラさせられるものかもしれません。

そこでサンプルを見てください。
LightBoxを使ってるサイトと似たような感じで表示されますが、これはPrototype.jsを使用していません。

代わりに「jQuery」と「ThickBox」というライブラリを使っています。
必要ファイルのサイズは31KB程ですので、1/3以下になりますね。

ThickBoxとLightBoxの違いは様々な形式に対応しているという点も違います。
LightBoxは画像ファイルにしか対応していませんが、ThickBoxはHTMLファイルを表示させることもできます。
外部ファイルでFlashを貼ったHTMLを読み込むことや、ログインボックスを表示させることができます。
ただ、LightBoxで使える画像のスライドショーには対応してませんので、その場合は外部ファイルでスライドショーのJavascriptを使ったHTMLを用意したりしなければならないですね。

肝心の導入方法です。
必要なのが、jQuaryとThickBox.js、ThickBox.css、loadingAnimation.gifですので、それぞれ下記サイトからDownloadします。
ThickBox公式サイト
(jQueryは二つありますが、compressed versionってのは改行やコメントを省いてより軽くしたものです)
サンプルで使っているthickbox.jsとthickbox.cssは若干いじってますので注意してください。

loadingAnimation.gifは読み込むHTMLファイルと同じ階層に「images」という名前のフォルダを作って入れてください。
thickbox.js47行目の<img src='images/loadingAnimation.gif' />ってところを絶対パスにしてしまったほうが他のページでも使えて便利かもしれません。

ThickBoxの使い方

<head>～</head>内に
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<link href="thickbox.css" rel="stylesheet" type="text/css" />


画像の場合

<a href="大きい画像.jpg" class="thickbox" rel="画像グループの名前" title="キャプション"><img src="サムネイル画像.jpg" alt="" /></a>


rel="画像グループの名前"を設定することで同じ名前のグループの画像をクリックすると「PREV」「NEXT」のボタンが表示されます。

HTMLの場合

<a href="開くファイル名.html?height=縦サイズ&width=横サイズ" title="開くページのタイトル" class="thickbox">HTMLの場合です</a>


HTMLを読み込む場合は読み込むHTMLファイルの文字コードをUTF-8で保存しないと文字化けしてしまうかもしれませんのでご注意を。

下記サイトでも導入の仕方が詳しく載っています。
Thickbox 2.1を導入する | Lyrical Cutie