少し古いライブラリですが、thickboxというjQueryをベースにしたJavaScriptのライブラリがあります。
Ajaxを使った非同期通信で、画像や別のHTMLファイルを画面にオーバーレイして表示してくれるという特徴があります。
手っ取り早くthickboxを知りたい場合は、公式サイト
の中にあるサンプル（上部メニューのExamplesから）を見てみるのが早いでしょう。
このように画像やコンテンツをページ遷移することなく、しかも格好よく見せることができるライブラリです。
このライブラリ自体は結構有名なのですが、実際に使うとなると使い道があまり見出せないと思う人も多いかもしれません。
個人のブログで、掲載した画像を格好よく見せたいという場合はありかもしれませんが、サイトやアプリケーションを構築するにあたって、画像を強調するような見せ方をすることは多くありません。
で、もう一つの機能である別のHTMLファイルを表示するという機能を使って、利用者に分かりやすいサイト作りをする方法を考えてみたいと思います。
例えば業務アプリケーションで多い、入力フォームを用意した画面に各項目の説明をこのthickboxを通して分かりやすく見せてあげるとか、文章中に出てくる難しい言葉の説明を、その文字列をクリックする事でFAQのように見せてあげるというような使い道があったりします。
こんな感じのHTMLがあって、特定の文字にthickboxを呼び出すロジックを組み込んでおきます（リンク部分）
このリンク部分をクリックすると
thickboxを動かして、そのリンク部分の説明書きを表示するとか。
以前に紹介した、特定の文字にマウスをあてると吹き出しを表示してくれるHints.js
でも似たような事はできるのですが、このようなFAQ形式であれば文字数が多くなったりしますし、画面のレイアウトを自由に変えれるのでお勧めです。（Hints.jsは特定の位置にマウスをあて続けなければ表示が消えてしまいますし）
thickboxの設置方法
1. jQueryのダウンロード
最初に説明したとおり、thickboxはｊQueryをベースに作られているので、まずはｊQueryを設置する必要があります。
ｊQueryのダウンロードは、公式サイト
より行えます。
今回は、2008年11月時点で最新のバージョン1.2.6を使用しています。
また、ここではファイル名をjquery.jsとしています。
2. thickboxのダウンロード
thickboxを使用するには3つのファイルが必要です。
- thickbox本体
（JavaScriptファイル）
- thickbox用のCSSファイル
- ページ読み込み時のアニメーションGIF
（※）
※ なくても動きます。
しかし、thickbox本体に関しては、公式ページからダウンロードするのではなく、下記サイトからダウンロードしたものを利用した方がよさそうです。
Thickbox 3.1 IE7 Positioning bug ＠ Jamie Thompson
※ thickbox.patch.jsをダウンロード
理由は、本家のthickboxを利用するとInternet Explorer7で見たときに表示位置やレイアウトがずれるというバグがあります。
どうも表示するコンテンツの高さがブラウザのウィンドウサイズを超えて表示した場合に、位置がずれるというバグが出てくるようです。
3. ｊQueryとthickboxの配置
では、ダウンロードしたｊQueryとthickboxを配置してみましょう。
今回は、下記のような構成で配置してみました。
.
|-- css
| `-- thickbox.css
|-- img
| `-- loadingAnimation.gif
|-- index.html
|-- js
| |-- jquery.js
| `-- thickbox.js
`-- readme.html
配置する位置は任意の位置でかまいませんが、thickbox本体（thickbox.js）内にローディング時のアニメーションGIFのパスを指定している箇所があるので、そこを編集しておく必要があります。
- thickbox.js 11行目
var tb_pathToImage = "/img/loadingAnimation.gif";
thickboxの使い方
先ほどの例で示したようなFAQ形式でHTMLファイルを表示する場合の方法について書きたいと思います。
呼び出しもとのHTMLファイルを作ります。
- index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>a day in the boy's life</title>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/thickbox.js"></script>
<link rel="stylesheet" href="/css/thickbox.css" type="text/css" media="screen" />
</head>
<body>
<br />
<br />
このサイトは、<a href="/help.html?height=200&width=400" class="thickbox">A Day In The Boy's Life</a>の別館です。
</body>
</html>
最初に、ｊQueryのJavaScriptファイル（jquery.js）を呼び出した後に、thickbox本体を呼び出します。
そして、thickbox用のCSSも読み込むように指定します。
アンカータグ内で指定している、width（表示する画面の幅。デフォルト630px）とheight（表示する画面の高さ。デフォルト440px）のパラメータがthickboxで表示する際の横幅と縦幅になります。
これはお好みで調整可能です。
最後に、class名をthickboxと指定します。（このクラス名がthickboxの呼び出し対象となります）
呼び出し先のHTMLファイル（上記の場合、help.html）はなんでもかまいません。
この中に画像やFlashを埋め込んでいても問題なく動作します。
ただ、thickboxで表示する際の幅と高さにあわせた形で作っておいた方が綺麗に見せることができます。
また、今回は静的なHTMLファイルを呼び出してみましたが、FAQの文字列をDBに登録しておき、上手くパラメータを渡す事で動的に見せるプログラムファイルを指定しても問題なく動作します。
thickboxの応用
単純に言ってしまえば、ポップアップウィンドウの代用と言ったところですので、様々な応用が考えれます。
例えば、住所入力フォームで郵便番号検索を補助するような役割のヘルプ画面に応用してみましょう。
よくあるパターンでは、「郵便番号検索」というようなボタンをクリックすると新しいウィンドウが立ち上がって、そこから自分の住所を選択すると、元画面のテキストボックスに郵便番号が入っているというパターンです。
まずは、イメージから。
最初に、このような画面があって「こちら」の部分がリンクになっており、クリックする事でthickboxが呼び出されます。
この画面から「こちら」というリンクをクリックすると、郵便番号検索画面がでてきます。
この画面から「登録」というボタンを押すと、thickboxが解除されて元画面の「郵便番号」のテキストボックスに該当の住所の郵便番号が入るというものです。
ソースもいたって簡単にかけます。
- 呼び出しもとのファイル（input.html）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>a day in the boy's life</title>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/thickbox.js"></script>
<link rel="stylesheet" href="/css/thickbox.css" type="text/css" media="screen" />
</head>
<body>
<br />
<br />
<br />
郵便番号を入力してください。郵便番号が不明な場合は、<a href="address.html?width=400&height
=250" class="thickbox">こちら</a>から検索できます。
<br />
郵便番号： <input type="text" name="text_box" id="zip_code">
</body>
</html>
- 呼び出し先のファイル（address.html）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>a day in the boy's life</title>
<link rel="stylesheet" href="/css/mystyle.css" type="text/css" />
<script type="text/Javascript">
<!--
function inputZipCode(zip_code) {
$("#zip_code").val(zip_code); // 開いたファイルにあるテキストボックスに郵便番号をセット
tb_remove(); // thickboxを解除する
}
// -->
</script>
</head>
<body>
<table class="help_tab">
<tr>
<th>-</th>
<th>住所</th>
</tr>
<tr>
<td><input type="button" value="登録" onClick="inputZipCode('160-0021')"></td>
<td>東京都 新宿区 歌舞伎町</td>
</tr>
<tr>
<td><input type="button" value="登録" onClick="inputZipCode('154-0017')"></td>
<td>東京都 世田谷区 世田谷</td>
</tr>
<tr>
<td><input type="button" value="登録" onClick="inputZipCode('150-0002')"></td>
<td>東京都 渋谷区 渋谷</td>
</tr>
</table>
</body>
</html>
「登録」ボタンが押されると、（ｊQueryの表記になりますが）受取った郵便番号を呼び出しもとのファイル（input.html）のテキストボックスの値にセットしてあげています。
そして、その後にtb_remove()関数でthickboxを解除しています。
tb_remove()関数は、thickbox.jsの中で定義されています。
使い方次第で色々な応用ができるライブラリなので活用してみては如何でしょうか。
