かっこいいなぁと思っていたので自分もやってみました。
調べたところ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をカスタマイズすればまた色々できそうですね。
