こんにちわ。
職人見習いの小森です。
今回は、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）が書いています。