JavaScript

画像もHTMLもオーバーレイ表示 - ThickBox 3

2008-02-01
7分で読了
更新: 2025-12-14

目次

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を使う時に追加する属性

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

共通事項

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

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

1枚の画像を表示

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

Single Image

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

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

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

Plant 1 
Plant 2 
Plant 3 
Plant 4

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

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

EXAMPLE

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

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

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

EXAMPLE

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

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

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

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

EXAMPLE

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

EXAMPLE

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;
}

この記事をシェア

関連記事