【ThickBox】ThickBox3

画像・html・外部ファイルをクリックで拡大、背景ブラックアウト。

• jQueryベース
• 画像（複数も可）、html、外部ファイルを拡大表示
• 画像：要素に、class・rel・tittle属性を追加
  html、外部ファイル：要素に、href属性にサイズやURLなど指定
• W3C　Markup Validation Service→OK
• W3C　CSS Validation Service→「thickbox.css」がエラー
• 「macffbghack.png」の設定を忘れると、MacFxでブラックアウトしない現象が起きるので注意

設置方法

1. http://jquery.com/demo/thickbox/よりDL
   
   
   • jquery.js
   • loadingAnimation.gif
   • thickbox.css
   • thickbox.js
   • macFFBgHack.png


2. 「thickbox.js」8行目の「loadingAnimation.gif」へのパスを書き換え
   （例）
   var tb_pathToImage = "/images/loadingAnimation.gif";
3. 「thickbox.css」37行目「macFFBgHack.png」へのパスを書き換え
4. head要素内で「thickbox.css」「jquery.js」「thickbox.js」読み込み
5. 拡大したい画像などに細工

【画像】

<a class="thickbox" title="*1" href="**.jpg" rel="*2">

• 「class="thickbox"」必須
• *1　拡大した時に出るタイトル
• *2　画像が複数枚ある場合、同じ値を入れた画像は拡大画像に「next」「Prev」が表示

【html要素】

<a href="#TB_inline?height=300&width=300&inlineId=*3" class="thickbox">html拡大</a>
<div id="*3" style="display:none">
拡大表示されたhtml</div>

• 「class="thickbox"」必須
• *3　IDを指定

【外部ファイル】

<a href="aaa.html?width=300&height=300" class="thickbox">

• html要素と同様

参照：
http://blog.webcreativepark.net/2008/03/24-223837.html