Thickbox
最近気になっていた、Thickboxを使って簡単に画像やHTMLファイルの中身をカッコよくページ内表示できるようにしました。
ダウンロード
配布サイト上部にある「Download」タブの中下記のファイルをダウンロード。
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>
titleで指定した説明文が画像の下に表示されます。
HTMLの場合
必要なCSSファイルとJavaScriptファイルをインクルードした上で、次のように<a>タグを使ってページにリンクを貼ります。
この際、必ず ?height=200&width=300 のように開く際のサイズをクエリ文字列で指定しないとダメみたいです。
<a href="ajaxOverFlow.htm?height=200&width=300" title="ajax" class="thickbox">リンク</a>
これだけで、リンクをクリックした際に次のように指定したhtmlファイルを同じウィンドウ内で開くことが出来ます。
ページの縦幅が長い場合も自動的にスクロールバーも表示されます。
posted bykmori : 2007年03月06日 16:12
トラックバックURL
このエントリーのトラックバックURL:
http://it-needs.com/hp1/cgi-bin/mt-tb.cgi/27
コメント
コメントを送ってください
サインインを受け付けました。 . さん。コメントしてください。 (サイン・アウト)
(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)
・Thickbox.js
・Thickbo.css
・Jquery-latest.js
・loadingAnimation.gif