thickbox 使い方 画像サムネール
参考サイト
fuku-chang.net:Movable Type 4.1にThickBox 3.1を設置
http://www.fuku-chang.net/2008/07/movable-type-4
【作業手順メモ】
1.ダウンロード
http://jquery.com/demo/thickbox/
ThickBoxのサイト から以下のリソースをダウンロード(リンクを右クリックで保存)します。
2.上記4ファイルをアップロード
3.head要素の設定
▼例
<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
4.<a>タグの設定
▼例
<a href="08.jpg" class="thickbox" rel="plant" title="plant01"><img src="08.jpg" alt="" width="180" height="120" /></a>
▼HTMLで表示したい場合
<a href="08.htm?keepThis=true&TB_iframe=true&height=500&width=680" class="thickbox" rel="plant" title="plant01"></a>
5.アップロード
fuku-chang.net:Movable Type 4.1にThickBox 3.1を設置
http://www.fuku-chang.net/2008/07/movable-type-4
【作業手順メモ】
1.ダウンロード
http://jquery.com/demo/thickbox/
ThickBoxのサイト から以下のリソースをダウンロード(リンクを右クリックで保存)します。
- thickbox.js(お好みでthickbox-compressd.jsをダウンロード・リネーム)
- thickbox.css
- loadingAnimation.gif
- jquery.js(jquery-latest.jsをリネーム)
2.上記4ファイルをアップロード
3.head要素の設定
▼例
<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
4.<a>タグの設定
▼例
<a href="08.jpg" class="thickbox" rel="plant" title="plant01"><img src="08.jpg" alt="" width="180" height="120" /></a>
▼HTMLで表示したい場合
<a href="08.htm?keepThis=true&TB_iframe=true&height=500&width=680" class="thickbox" rel="plant" title="plant01"></a>
5.アップロード