jQuery Thickboxの設定方法

こんにちわ。
職人見習いの小森です。

今回は、jQuery ThickBoxについて紹介します。

配布ページより、以下のファイルをダウンロードしてきます。
http://jquery.com/demo/thickbox/

jquery-latest.js
loadingAnimation.gif
thickbox.css
thickbox.js

thickbox.js 8行目にローディング画像のパスを自分の環境に合わせます。

var tb_pathToImage = "images/loadingAnimation.gif";

使用するファイルを読み込みます。

<link rel="stylesheet" href="thickbox.css" type="text/css" media="all">
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript" src="thickbox.js"></script>

サムネイル表示した画像に拡大画像を表示するリンクを付けます。
一つの場合は表示されませんが、複数表示した場合rel属性を同じ値にするとprevとnextのリンクも表示されます。

<a href="images/image1.jpg" class="thickbox" rel="gallery" title="picture"><img src="images/image1.jpg" alt=" " /></a>
<a href="images/image2.jpg" class="thickbox" rel="gallery" title="picture"><img src="images/image2.jpg" alt=" " /></a>
<a href="images/image3.jpg" class="thickbox" rel="gallery" title="picture"><img src="images/image3.jpg" alt=" " /></a>

HTML内にある非表示にしているHTMLをリンクをクリックすることで表示します。

<a href="#TB_inline?width=400&height=300&inlineId=thickboxtest" class="thickbox">隠れているHTMLが表示される</a>
<div id="thickboxtest" style="display:none"><span style="font-weight:bold">テスト</span></div>

iframeを利用し外部HTMLを拡大表示することも出来ます。

<a href="test.html?TB_iframe=true&width=400&height=300" class="thickbox">testhtmlInIframe</a>

※この記事は、なかの人（spitz8008）が書いています。