目次
#contents
**概要 [#uda26695]
ThickBoxはAjaxを使用してリンク先（画像・HTML）をポップアップ表示させるライブラリです。~
-環境情報~
|OS|CentOS 5.3|
|WebServer|Apache 2.2|
|ライブラリ|ThickBox 3.1|
-配布元~
http://jquery.com/demo/thickbox/
~
------
**設置方法 [#bc5ed711]
***ライブラリの入手 [#y4f75047]
配布元サイト（http://jquery.com/demo/thickbox/）へアクセスし、[Download]セクションにあるリンクよりファイルをダウンロードします。~
~
以下のファイルを入手します
|リンク名|URL|
|thickbox.js|http://jquery.com/demo/thickbox/thickbox-code/thickbox.js|
|thickbox-compressed.js|http://jquery.com/demo/thickbox/thickbox-code/thickbox-compressed.js|
|ThickBox.css|http://jquery.com/demo/thickbox/thickbox-code/thickbox.css|
|loadingAnimation.gif|ttp://jquery.com/demo/thickbox/images/loadingAnimation.gif|
|jQuery JavaScript library|http://jquery.com/src/jquery-latest.js|
~
------
***ライブラリの配置 [#bb0f0aa6]
Webコンテンツの配置ディレクトリにライブラリを配置します。~
/js/thickbox配下に配置する例では、以下の様なディレクトリ構成となります。~
|ディレクトリ|ファイル|コメント|
|/js/thickbox|thickbox.js||
||thickbox-compressed.js||
||thickbox.css||
||jquery.js|jquery-latest.jsをリネームします|
|/js/thickbox/images|loadingAnimation.gif||
~
------
***HTMLへの組み込み [#n083b219]
thickboxを使用するHTMLのヘッダに以下の設定を入れます。~
太字部分はライブラリを保管しているパスを記述しますので、配置場所が異なる場合は変更します。~
|<script type="text/javascript" src="''/js/thickbox/''jquery.js"></script>|
|<script type="text/javascript" src="''/js/thickbox/''thickbox.js"></script>|
|<link rel="stylesheet" href="''/js/thickbox/''thickbox.css" type="text/css" media="all" />|
~
------
**HTML内での利用方法 [#p165a3b5]
***HTMLを表示させる [#mbbf65c3]
リンクからHTMLをポップアップさせます。~
太字部分に表示させるHTMLを指定します。~
|<a href="''test.html''?keepThis=true&TB_iframe=true&height=250&width=400" class="thickbox" title="comment">リンク</a>|
