ThickBox 3.1　　　 　Prev. Page Next Page



ThickBox 3はAjax(非同期通信処理)を利用して画像を表示するライブラリです。

ThickBox 3.1

ThickBox 3の画像は単独の表示だけでなく、複数画像をグループ化してスライドとして表示させることもでき、また、画像だけでなくHTMLファイルなども表示させることができます。
同じようなライブラリとしては(Lightbox)が有名ですが、Lightboxはprototype.jsライブラリを利用しているのに対し、ThickBox 3はjQueryライブラリを利用しています。 そのためLightboxと比べてThickBoxの方が使用しているライブラリのプログラムサイズが小さく、動作が軽快です。
ThickBox 3の大きな特長としてスクリプト(プログラム)を記述しなくてよいという点があります。 つまり、全くプログラムが分からない人でも気軽に使うことができます。
ThickBox 3ではHTMLのタグのrel属性にthickboxの文字を記述するだけで画像の表示もHTMLページの表示もできてしまうという手軽さです。

■Download

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

以下の４つのファイルをダウンロードします。
  • thickbox.js or thickbox-compressed.js
  • ThickBox.css
  • loadingAnimation.gif
  • jquery-latest.js or jQuery-latest.pack.js


    • ここでは動作の軽快さを重視して圧縮版(compressed version)をダウンロードしましたが、本体のファイルサイズも小さく特に圧縮版を使う必要もないでしょう。
    これらのファイルをサーバーにアップロードします。 名前をthick-copressed.js →thiickbox.js, jQuery-latest.pack.js →jquery.j-latest.js に変更しましたがそのままでも問題ありません。 images ディレクトリーを作成し、配下にloadingAnimation.gifを配置します。

    ■Implement

    ページの最初にDTD対応の宣言を最初にします。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <HEAD>と</HEAD>の間に以下の記述をします。
    <script type="text/javascript" src="path-to-file/jquery-latest.js">
    <script type="text/javascript" src="path-to-file/thickbox.js">
    <link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css">
    path-to-fileには実際のディレクトリー名を記述してください。

    ■Example

  • Single Image

    • idle
    面倒なので、同一画面を小さく表示して、ThickBoxで拡大しています。
    <a href="path-to-file/sample.jpg" title="Idle" class="thickbox"><img src="path-to-file/sample.jpg" width=50 hieght=100 alt="sample"></a>

  • Gallery Images

    • Erika1 Erika2 Erika3 Erika4 Erika5 Erika6

    最新のjQuery library(1.4)では、"@" selector をサポートしていません。thickbox.jsの次の箇所を必ず以下のように削除してください。削除しないと正常に動作しません。
    TB_TempArray = $("a[@rel="+imageGroup+"]").get();
    ↓　　
    TB_TempArray = $("a[rel="+imageGroup+"]").get();

    a要素のrel="グループ名"を同一にすると同じグループ名の画像がグループ化されます。

    <a href="images/todaerika01.jpg" class="thickbox" rel="erika" title="Toda Erika 01"><img src="images/todaerika01.jpg" width=50 hieght=100 alt="Erika1" /></a>
    <a href="images/todaerika02.jpg" class="thickbox" rel="erika" title="Toda Erika 02"><img src="images/todaerika02.jpg" width=50 hieght=100 alt="Erika2" /></a>
    <a href="images/todaerika03.jpg" class="thickbox" rel="erika" title="Toda Erika 03"><img src="images/todaerika03.jpg" width=50 hieght=100 alt="Erika3" /></a>
    <a href="images/todaerika04.jpg" class="thickbox" rel="erika" title="Toda Erika 04"><img src="images/todaerika04.jpg" width=50 hieght=100 alt="Erika4" /></a>
    <a href="images/todaerika05.jpg" class="thickbox" rel="erika" title="Toda Erika 05"><img src="images/todaerika05.jpg" width=50 hieght=100 alt="Erika5" /></a>
    <a href="images/todaerika06.jpg" class="thickbox" rel="erika" title="Toda Erika 06"><img src="images/todaerika06.jpg" width=50 hieght=100 alt="Erika6" /></a>

  • Inline content

    • heightとwidthに表示するボックスのサイズ、inlineIdに表示する要素のidを記述します。
    <input alt="#TB_inline?height=50&width=250&inlineId=myOnP" class="thickbox" title="Inline" type="button" value=Show />

    The content is shown on the thickbox.

    Show

  • iFramed content
    • <a href="ajax.html?keepThis=true&TB_iframe=true&height=250&width=700" class="thickbox" title="JavaScriiptとは">Ajaxとは</a>
    Ajaxとは

    DOMとは
    		■相互リンク

    サーバー亭
    高級補正下着
    囲碁ソフト開発
    ===============
    ジュンエール