jQuery版のLightBox「ThickBox」

ThickBoxはLightBoxのjQuery版とも言えるJavaScriptライブラリで、画像をクリックするこのにより拡大画像を表示させることが可能です。

LightBoxがprototype.jsをベースに開発されたjsライブラリであるのに対して、ThickBoxはjQueryをベースに開発されています。

設置方法

配布ページよりjquery.jsとloadingAnimation.gif、thickbox.css、thickbox.jsというファイルをダウンロードし、ThickBoxを利用したいhtmlのhead要素などでそれらのファイルを読み込みます。

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

次にサムネイル画像に拡大した画像へのリンクを張ります。
その際にclass属性で「thickbox」、title属性で画像の名前を指定します。

<a href="images/image-1.jpg" class="thickbox"  title="ThickBox Sample">
	<img src="images/image-1-s.jpg" alt=" " />
</a>

これだけでThickBoxの設置は完了です。

サンプル

複数の画像のギャラリーとして利用する

複数の画像でThickBoxを利用する際に、それぞれのa要素のrel属性の値を同じものにしておけば拡大画像上に「next」「Prev」のリンクが表示され、ギャラリーとして利用することが可能です。

<a href="images/image-1.jpg" class="thickbox" rel="gallery-plants" title="my caption"><img src="images/image-1-s.jpg" alt=" " /></a>
<a href="images/image-2.jpg" class="thickbox" rel="gallery-plants" title="my caption"><img src="images/image-2-s.jpg" alt=" " /></a>
<a href="images/image-3.jpg" class="thickbox" rel="gallery-plants" title="my caption"><img src="images/image-3-s.jpg" alt=" " /></a>

サンプル

html要素を拡大表示する

ThickBoxが拡大表示できるのは画像だけではありません。

以下のようにすれば、html要素を拡大表示することが可能です。

<a href="#TB_inline?height=155&width=300&inlineId=myOnPageContent" class="thickbox">

heightとwidthに表示するボックスのサイズ、inlineIdに表示する要素のidを記述します。

表示する要素をdisplay:noneで隠しておけば、スペースを有効に利用できるでしょう。

サンプル

外部ファイルを読み込み表示する

ThickBoxにはAjaxやiFrameを利用して外部ファイルを表示する機能も付いています。

<a href="http://blog.webcreativepark.net?TB_iframe=true&width=800&height=500" class="thickbox">

外部ファイルのurlの後に?TB_iframe=trueと記述してheightとwidthに表示するボックスのサイズを指定すればiFrameで外部ファイルを取得表示できます。

サンプル

読み込むファイルのurlの後ろにサイズを指定すればajaxで取得できます。

<a href="sample.html?width=300&height=100" class="thickbox">

サンプル

Ajaxモードで外部ファイルを取得した場合する場合は、

などの制約を受ける形になります。

関連エントリー

ページ内に様々なwindowを表示するControl.Modal
LightBox風にコンテンツを表示するModalbox
画像に光沢を与えるjsライブラリ『Glossy.js』
アコーディオン形式で内容を表示できるAccordion v2.0
画像に鏡面効果を与えるreflection.js

スポンサードリンク

«ダイナミックパブリッシング環境でSortCatFldプラグインを利用する。 | メイン | [書評]SEO SEM Technique Vol.4»