jQuery ThickBoxを使ってみた

画像をクリックすると画像を拡大して表示するサイトをよく見かけ、
かっこいいなぁと思っていたので自分もやってみました。

調べたところjQueryとThickboxというものを使用すると簡単に実現出来そうです。


手順
配布ページより以下のファイルをダウンロード。
http://jquery.com/demo/thickbox/

• jquery.js
• loadingAnimation.gif
• thickbox.css
• thickbox.js

※jquery.jsの名前はjquery-latest.jsだったりするかも


thickbox.jsの8行目でloadingAnimation.gifのパスが設定されているので
loadingAnimation.gifのパスを自分に環境に合わせます。

var tb_pathToImage = "images/loadingAnimation.gif";

ThickBoxを利用したいhtmlのhead要素などでファイルを読み込みます。

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

あとは実際に使用するHTMLに設置するだけです。

▼画像拡大の場合
サムネイル画像と拡大画像へのリンクを張ります。一番見かけますね。

<a href="拡大画像1.jpg" class="thickbox" title="サンプル" rel="test"><img src="サムネイル画像1.jpg" width="160" height="120" alt="サンプル" border="0" /></a>
<a href="拡大画像2.jpg" class="thickbox" title="サンプル" rel="test"><img src="サムネイル画像2.jpg" width="160" height="120" alt="サンプル" border="0" /></a>

▼HTML拡大表示
HTMLを表示することもできます。

<a href="test.html?width=400&height=200" class="thickbox">testhtml</a>

▼iframe拡大表示
iframeを表示することもできるんですね。

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

▼ページ内HTML拡大表示
ページ内のHTMLを拡大表示することもできます。ページ内のdiv要素をdisplay:noneにしておいて、リンククリックで表示みたいな。

<a href="#TB_inline?width=400&height=300&inlineId=thickboxdivtest" class="thickbox">ページ内HTMLテスト</a>
<div id="thickboxdivtest" style="display:none"><span style="font-weight:bold">テスト文字表示だよ<br/>テスト文字表示だよ<br/></span></div>

注意点
ちなみに、最初グループ化属性のrel属性をつけると画像が表示されませんでした。
jqueryとthickboxのversionに相性があるようで、rel属性をつけると画像が表示されない
場合は以下の修正をすると動作するようになります。

thickbox.js（ver3.1、unCompressed）の79行目を以下のように修正

TB_TempArray = $(“a[@rel="+imageGroup+"]“).get();
                 ↓
TB_TempArray = $(“a[rel="+imageGroup+"]“).get();

ThickBox、簡単に設置できるのでお勧めです。
とりあえず使い方は押さえたので、thickbox.js、thickbox.cssをカスタマイズすればまた色々できそうですね。