ThickBox 3とは?

ThickBox 3はAjax(非同期通信処理)を利用して画像を表示するライブラリです。同じようなライブラリとしてはLightbox)が有名ですが、Lightboxはprototype.jsライブラリを利用しているのに対し、ThickBox 3はjQueryライブラリを利用しています。ThickBox 3の画像は単独の表示だけでなく、複数画像をグループ化してスライドとして表示させることもできます。また、画像だけでなくHTMLファイルなども表示させることができるので、いろいろ応用できそうです。Lightboxと比べてもThickBoxの方がプログラムサイズがコンパクトなことも魅力です。

ThickBox 3の大きな特長としてスクリプト(プログラム)を記述しなくてよいという点があります。つまり、全くプログラムが分からない人手も気軽に使うことができます。ThickBox 3ではHTMLの<a>タグのrel属性にthickboxの文字を記述するだけで画像の表示もHTMLページの表示もできてしまうという手軽さです。また、JavaScriptのコードが実行できるブログであればThickBox 3を利用することができます。

ThickBox 3はここページからダウンロードできます。

ThickBox 3

「Download」のタブで表示されている部分に各ファイルへのリンクがありますので、対象ファイルを保存します。圧縮ファイルもありますが、以下のファイルが必要です。

• thickbox.js
• thickbox.css
• loadingAnimation.gif
• jquery-latest.js

ライブラリの配置図

一番最後のURLはjQueryライブラリの最新版になっています。この最新版のファイル名はjquery-latest.jsになっていますが、ここでは説明の都合上、jquery.jsと名前を変更したものを使用します。jQueryライブラリは圧縮しコンパクト化されたものが以下になります。

jquery-latest.pack.js

Thickboxも圧縮されたものが以下に用意されています。

thickbox-compressed.js

これらをダウンロードして名前を変更すれば、ここで説明しているサンプルをそのまま動作させることができます(jquery-latest.pack.jsはjquery.jsに、thickbox-compressed.jsはthickbox.jsに名前を変更してください)。