Thickbox
最近気になっていた、Thickboxを使って簡単に画像やHTMLファイルの中身をカッコよくページ内表示できるようにしました。
ダウンロード 配布サイト上部にある「Download」タブの中下記のファイルをダウンロード。
・Thickbox.js
・Thickbo.css
・Jquery-latest.js
・loadingAnimation.gif
Thickbox.js内の
<img src=’images/loadingAnimation.gif’ />
の部分をファイルを設置した所に変更。
HTMLへの組み込み 使用中のテンプレのHTML欄の<head>～</head>内に、
<script type=”text/javascript” src=”./jquery-latest.js”></script>
<script type=”text/javascript” src=”./thickbox.js”></script>
<link rel=”stylesheet” type=”text/css” href=”./thickbox.css” />
画像の場合
必要なCSSファイルとJavaScriptファイルをインクルードした上で、次のように画像タグを<a>タグで囲います。
<a>タグには class=”thickbox” を指定し、title属性に画像の説明文を入れます。
<a href=”./image_S.jpg” title=”画像と一緒に表示させたい文字列” class=”thickbox“><img src=”./image_L.jpg” alt=”Image”/></a>
HTMLの場合
必要なCSSファイルとJavaScriptファイルをインクルードした上で、次のように<a>タグを使ってページにリンクを貼ります。
この際、必ず ?height=200&width=300 のように開く際のサイズをクエリ文字列で指定しないとダメみたいです。
<a href=”ajaxOverFlow.htm?height=200&width=300” title=”ajax” class=”thickbox”>リンク</a>
これだけで、リンクをクリックした際に次のように指定したhtmlファイルを同じウィンドウ内で開くことが出来ます。
ページの縦幅が長い場合も自動的にスクロールバーも表示されます。
‹ Fedora Core6 Flash Video Player ›