Thickbox3で画像、htmlをサクサク表示

以下の四つのファイルを使用。

• thickbox.js
• thickbox.css
• loadingAnimation.gif
• jquery126.js

Thickboxを使用するhtmlファイルのヘッダに、利用するjsファイル、cssファイルへのリンクを張る。

<script type="text/javascript" src="jquery126.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="all">

サムネール（テキストでもいいけど）に張るリンクタグ内に、thickboxを呼び出す為の記述をする。

<a href="001.jpg" class="thickbox" title="ここに画像キャプションのテキストが入る">
    <img src="001t.jpg" width="120" height="160" alt="" />
</a>

aタグでリンクを張っている001.jpgがthickboxによって拡大表示される実画像ファイルで、このaタグ内に「class=”thickbox”」を追加記述してやればよい。aタグにはさまれているimgファイルがその画像のサムネールとなる。（なのでテキストでもよい）
実行サンプル

複数の画像を同一のグループとして、そのグループ内でスライドショー表示させることも可能。グループ名を変えれば、いくらでも作成出来る。記述は、さっきのaタグ内に、さらに「rel=”グループ名”」を追加するだけ。
実行サンプル（画像下にスライドショー進行させるためのリンクが現れている）

PrevやNext等、英語表記の部分を日本語化する場合はthickbox.jsファイルの内容を以下のように編集すればよい。

TB_imageCount = "Image " + (TB_Counter + 1) +" of "+ (TB_TempArray.length);
↓
TB_imageCount = (TB_TempArray.length)+" 枚中 " + (TB_Counter + 1) +"枚目";

TB_NextHTML = "<span id='TB_next'>  <a href='#'>Next ></a></span>";
↓
TB_NextHTML = "<span id='TB_next'>  <a href='#'>次へ ></a></span>";

※文字化けする場合があるので、htmlファイルとthickbox.jsファイルの文字コードを合わせておくことが必要。

そして、画像だけでなく他のhtmlファイルを表示することも可能。（Ajaxの制約上、同じドメイン上にあるものでないとだめだけど）
aタグのhref属性のパラメータに以下のようにして記述してやる。sample.htmlというファイルを幅400px、高さ200pxで表示するという意味。

<a href="sample.html?width=400&height=200" class="thickbox">～</a>

このように異なるhtmlファイルをthickboxで表示する際には、そのhtmlファイル（thickboxで表示させる）内にある画像のパス指定に注意。（thickboxを実行しているファイルがルートパスになる）

他にも、同一ページ内の領域をサイズ指定して表示することも出来るらしい。
ゼロからはじめるThickBox 3を参考にさせていただきました。ありがとうございました。