スクリプトを書かずに使える「ThickBox」
[1] jQueryのページ。「Download」をクリックして移動します
[2] 「jquery-1.2.6.min.js」のリンク文字をクリックしましょう
[3] IEの場合は「保存」ボタンをクリック
[4] ファイル名は「jquery-1.2.6.min.js」にして保存します
[5] ThickBoxのトップページ（デモページも兼用）
[6] IEでは保存するかどうかのダイアログが表示されるので保存ボタンをクリック
[7] jqueryライブラリファイルと同じ場所に保存
[8] ThickBox.cssのリンク文字の上で右ボタンをクリック
ダイアログをオーバーレイ表示するAjaxライブラリはいくつかあります。専用のライブラリもありますが、今回はあえて、画像スライド表示用のライブラリ「ThickBox」を使用したいと思います。このThickBoxは、最近Ajaxライブラリとしてよく利用されている「jQuery」の上で動作するライブラリです。
ThickBoxをオススメするのは、スクリプトを書くことなく手軽に使えるからです。今回はダイアログを表示させますが、画像をスライド表示する場合でもスクリプトをまったく書く必要がありません。
ThickBoxは、もともと「Protype.js」の上で動くスライド表示ライブラリ「Lightbox」をもとに作られたとも言えます。Lightboxも手軽に使えるものですが、ThickBoxはLightboxの後に作られた分、ダイアログ表示など、Lightboxにはない機能が用意されています。
それでは、ThickBoxを使用するための準備に取りかかりましょう。ThickBoxはjQueryライブラリを使っていますので、先に以下のURLからjQueryをダウンロードします。2008年10月時点でのバージョンは1.2.6です。
「Download( jQuery );」と書かれているボタンをクリックすると、ダウンロード先のページに移動します [1] 。「jquery-1.2.6.min.js」のリンク文字をクリックします [2] 。Internet Explorer（IE）の場合はダイアログが表示されるので「保存」ボタンをクリックして適当なところ場所に保存します [3] [4]。なお、保存するファイル名は「jquery-1.2.6.min.js」にしてください。
次にThickBoxをダウンロードします。ThickBoxのスクリプトファイルとスタイルシートは以下のURLからダウンロードします。
http://jquery.com/demo/thickbox/
Downloadのタブ内にある「thickbox.js」のリンク文字をクリックします [5] 。IEの場合は保存するかどうかを聞いてきますので保存ボタンをクリックします [6] 。Safariなどでは、そのままソースコードが表示されるのでthickbox.jsのリンク文字の上で右ボタンをクリックし「リンク先のファイルを別名で保存...」を選択しましょう。
保存ダイアログが表示されたら、保存先を指定します。保存先はjqueryライブラリファイルと同じ場所にします [7] 。ファイル名は変更せずに「thickbox.js」のままにしておきましょう。
次にThickboxで使うスタイルシートファイルをダウンロードします。先ほどと同様にDownloadのタブ内にある「ThickBox.css」のリンク文字の上で右ボタンをクリックします [8] 。IEの場合は「対象をファイルに保存...」を選択、Safariなどの場合は右クリックで「リンク先のファイルを別名で保存...」を選択します。こちらもファイル名は、「thickbox」のままにしておきましょう。
これで準備が完了です。今回のサンプルで使うスクリプトファイル、スタイルシートファイル、HTMLファイルは以下のように構成されています。
