2008-02-27 説明を詳しくしました。

画像やHTMLをオーバーレイで表示するAjaxライブラリ、ThickBox 3.1を導入しました。導入方法は【ハウツー】ゼロからはじめるThickBox 3 - 画像もHTMLファイルもスイスイ表示（マイコミジャーナル）を見れば問題なく導入できると思いますが、ここでも素人なりに丁寧に手順を載せておきます。

まず簡単なサンプル作ったので見てやってください。

ThickBoxライブラリのダウンロード

はじめにThickBox 3.1へアクセスします。

ThickBox 3.1

画面を少し下へ移動したところの「Download」のタブの中の、次の4つのリンクを右クリックしてファイルをダウンロードして保存します。このとき、「jQuery JavaScript library」については名前を「jquery-latest.js」から「jquery.js」に変えて保存しましょう。その他のファイル名は変更しなくてOKです。

  • thickbox.js
  • ThickBox.css
  • loadingAnimation.gif
  • jQuery JavaScript library

ThickBox 3.1のダウンロード

ThickBoxライブラリのアップロード

ダウンロードしたファイルをサイトにアップロードします。

今回はサイトパス（サイトのURL）の直下に「thickbox」というフォルダを作り、その中に次の3つのファイルをアップロードします。

  • jquery.js
  • thickbox.js
  • thickbox.css

続いてthickboxフォルダの中に「images」というフォルダを作り、その中に「loadingAnimation.gif」をアップロードします。

thickboxフォルダ

他のサイトでは、javascriptファイルはjsフォルダ、CSSファイルはCSSフォルダ、画像はimageフォルダと整理して入れているパターンが多いと思いますが、僕は日々改良したくなるブログでは、使用しているライブラリをいつ変更するかわからないので、まとめて一つのフォルダの中に入れるようにしています。複数のライブラリを使用する場合にはjquery.jsなどがダブルことにもなりますが、ある意味実験的なサイトなので削除が楽な方が良いという判断です。

ちなみに、2008-02-01 現在、当ブログではMovable typeをインストールしているフォルダの外に「library」というフォルダを作り、その中に「ThickBox 3」や「dp.SyntaxHighlighter」をまとめて入れています。tinybeans.net下の他のサイトでも使うかもしれないので。

libraryフォルダ

ThickBoxライブラリの読み込み

ThickBoxを搭載したいサイトのheader要素内に次のコードを追加します。ちなみに上記の理由から、javascriptやCSSを読み込むコードを他のそれらを読み込むコードと一緒にせずにコメントでくくってまとめています。

なお、以下のソースコードの例をあげますが、「@」で囲っている部分やリンクするファイルまでのパス、alt属性などを適宜書き換えてください。

<!-- ThickBox 3 -->
<script type="text/javascript" src="@PATH@/thickbox/jquery.js"></script>
<script type="text/javascript" src="@PATH@/thickbox/thickbox.js"></script>
<link rel="stylesheet" href="@PATH@/thickbox/thickbox.css" type="text/css" media="all" />
<!-- /ThickBox 3 -->

さて、これで準備は完了です。

ThickBoxを使う時に追加する属性

さて、実際にThickBoxを使うには、画像やHTMLページへリンクするときに、次のような属性を追加すればOKです。

共通事項

a要素に次の属性を追加します。

  • class="thickbox"
  • title="タイトルや説明文"　→入れなくてもOKです。以下の例では「@CAPTION OR TITLE@」部分を書き換えてください。

1枚の画像を表示

対応ファイル形式は.jpg .jpeg .png .gif .bmpです。

<a href="images/single.jpg" title="@CAPTION OR TITLE@" class="thickbox"><img src="images/single_t.jpg" alt="Single Image"/></a>

複数の画像をグループ表示

4つのファイルを1つのグループで表示する場合の例です。対応ファイル形式は.jpg .jpeg .png .gif .bmpです。

「@GROUP@」にグループ名を入れます。

<a href="images/plant1.jpg" title="@CAPTION OR TITLE@" class="thickbox" rel="@GROUP@"><img src="images/plant1_t.jpg" alt="Plant 1" /></a> 
<a href="images/plant2.jpg" title="@CAPTION OR TITLE@" class="thickbox" rel="@GROUP@"><img src="images/plant2_t.jpg" alt="Plant 2" /></a> 
<a href="images/plant3.jpg" title="@CAPTION OR TITLE@" class="thickbox" rel="@GROUP@"><img src="images/plant3_t.jpg" alt="Plant 3" /></a> 
<a href="images/plant4.jpg" title="@CAPTION OR TITLE@" class="thickbox" rel="@GROUP@"><img src="images/plant4_t.jpg" alt="Plant 4" /></a>

ページ内のコンテンツを表示

「@***@」に数値を、「@ID@」に表示させたい部分のid属性を入れます。

<a href="#TB_inline?height=@***@&width=@***@&inlineId=@ID@" class="thickbox">EXAMPLE</a>

なお、CSSの「display:none;」で隠されているコンテンツを表示することもできます。

また、hrefの最後に&modal=trueを加えることで、オーバーレイ表示されたThickBoxを閉じる機能を停止することができるようです。これは、文章を読ませて「OK」なりを押さないと閉じることができないような提供の仕方が考えられます。

この&modal=trueは以下のインラインフレームの場合やAjaxの場合も同様です。そちらの形式であれば、phpファイルなどを読み込んでログイン画面などを表示させるときに使うことが考えられます。

<a href="#TB_inline?height=@***@&width=@***@&inlineId=@ID@&modal=true" class="thickbox">EXAMPLE</a>

ただし、このままだとオーバーレイ表示されたコンテンツを閉じることができないので、非表示コンテンツの最後に次の閉じるボタンを追加します。この辺は僕は詳しく分かりません。

<input type="submit" value="close" onclick="tb_remove()" />

インラインフレームで他のページを表示

このパターンを使用すると、同一ドメインでも他のドメイン上のページでも表示することができます。

「@URL@」に表示させたいページのURLを、「@***@」に数値を入れます。

<a href="@URL@?keepThis=true&TB_iframe=true&height=@***@&width=@***@" title="@CAPTION OR TITLE@" class="thickbox">EXAMPLE</a>  

&modal=trueを加えることで、オーバーレイ表示されたThickBoxを閉じる機能を停止することができるようです。

<a href="@URL@?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=@***@&width=@***@&modal=true" title="@CAPTION OR TITLE@" class="thickbox">EXAMPLE</a>  

Ajaxコンテンツなどを表示

こちらはやや面倒なのでThickBox 3.1やゼロからはじめるThickBox 3 - 画像もHTMLファイルもスイスイ表示 - 5 他のページを表示するを参照してください。僕はインラインフレームのパターンで代用できるので、こちらは使ったことがありません。

サンプルについては、ThickBox 3.1のメニューからExamplesからご覧になれます。

その他

これまでは（他のブログで）Lightbox 2を使っていたので、このブログでは動作の軽いThickboxにしてみました。

画像表示に関しては、どちらが良いとかではなくそれぞれ一長一短ある、というか好みの問題でしょうか。。例えば大きな画像を表示させた時、Lightboxはスクロールして見る、ThickBoxは自動的に縮小されるといった違いもあるし、Lightboxはきれいだけどなれるとうっとうしい、Thickboxは軽いけどシンプルすぎるなど。。でも最大の違いは画像以外が表示できるか否かというところでしょうか。

ちなみに、ウィンドウサイズを検知して自動的に縮小する機能を解除する方法が以下に載っています。

なお、マイコミジャーナルの記事の6ページ目（角丸で表示する）で、Firefoxで先行実装されているCSS3のプロパティを利用して、背景画像を角丸にする方法が紹介されていますが、これはSafari 3でも可能です。thickbox.cssに以下を加えればOKです。

#TB_window {
-moz-border-radius:15px;
-webkit-border-radius: 15px;
}