![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
目次
ThickBoxはAjaxを使用してリンク先（画像・HTML）をポップアップ表示させるライブラリです。
配布元サイト（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 |
Webコンテンツの配置ディレクトリにライブラリを配置します。
/js/thickbox配下に配置する例では、以下の様なディレクトリ構成となります。
| ディレクトリ | ファイル | コメント |
| /js/thickbox | thickbox.js | |
| thickbox-compressed.js | ||
| thickbox.css | ||
| jquery.js | jquery-latest.jsをリネームします | |
| /js/thickbox/images | loadingAnimation.gif |
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をポップアップさせます。
太字部分に表示させるHTMLを指定します。
| <a href="test.html?keepThis=true&TB_iframe=true&height=250&width=400" class="thickbox" title="comment">リンク</a> |
