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

今回は、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";

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

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

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

隠れているHTMLが表示される

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

testhtmlInIframe

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