share facebook facebook twitter menu hatena pocket slack

2012.01.19 THU

jQuery Thickboxの設定方法

小森隆太

WRITTEN BY 小森隆太

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

今回は、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)が書いています。

小森隆太

小森隆太