Ajaxで画像表示（ThickBox3）
ThickBox3で利用しているjquery.jsが原因でAjaxカレンダーが表示できなくなったため現在、ThickBox3の使用を止めています。なのでサンプルは動きません。
調べたところprototype.jsがjQuery.jsに干渉しているようです。
上記の問題を修正しました。詳しくはコチラ
ThickBox3はAjaxを利用して画像を表示するライブラリです。
同じようなものにLightboxもありますが、今回はThickBoxを使ってみることに。
設置するとこんな感じで表示されます。（サンプル）
それでは設置方法です。
１．下記サイトより必要なファイルをダウンロード
ThickBox 3.1
「Download」の箇所に各ファイルへのリンクがあるので、右クリックし対象をファイルへ保存。
必要なファイルは下記の通りです。
・thickbox.js
・jquery.js
・thickbox.css
・loadingAnimation.gif
２．ダウンロードしたファイルを自身のサーバにあわせてアップロード
３．テンプレートの<head>～</head> に下記を追加・再構築
<script type="text/javascript" src="<$MTBlogURL$>js/jquery.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/thickbox.js"></script><link rel="stylesheet" href="<$MTBlogURL$>thickbox.css" type="text/css" media="screen" />パス部分は自身のサーバにあわせて書き換えてください。
４．
<a>タグのclass属性にthickboxを指定する。<a href="http://mt.nosusume.com/img/sample_l.gif" title="サンプル" class="thickbox">サンプル</a>左下のキャプションはtittle属性で指定できます。
以上です。
他にもいろいろと機能があるようです。
詳しくは本家サイトを参照して下さい。
コメントする