2007年12月25日

ThickBox 3の導入について、ほとんどLightbox JS v2.0と同じでした。
しかし、ページの起動の遅さがLightboxに目立つのに対し、ThickBoxは容量が
半分以下と軽いためそのようなことにはなりません。
導入を指南しているサイトが少ないので無駄に増やしてみる・・・。

1.ますはここの【Download】ってとこからこれらをダウンロード。
　・thickbox.js
　・ThickBox.css,
　・loadingAnimation.gif,
　・jQuery JavaScript library(jquery-latest.js)
　(同じ文字書いているところですね。)



2.【.gifファイル】を管理画面の『ファイルアップロード』からアップロード。
　そして、アップロードした【.gifファイル】のURLをコピー。
　『記事を書く』をクリックした場合の、タグの中にあるhttp://〜.gifまでです。
　http://ブログのアドレス/loadingAnimation.gif　←こんな感じのやつですね！

3.thickbox.jsをNotepadなりで開いて、【loadingAnimation.gif】で検索にかけましょう。
　(編集→検索)
　そして書き換えましょう！
images/loadingAnimation.gif"→"http://ブログのアドレス/loadingAnimation.gif"


4.残りのファイルをすべてアップロード！

5.もう3/4は終わってます。
　あとはテンプレートのHTMLにこんなん書きましょう！
　</head>の直前に書いてくださいね。
　4.の要領でURLコピーしてください。

<!-- thickboxー -->
<script type="text/javascript" src="http://ブログのアドレス/jquery-latest.js"></script>
<script type="text/javascript" src="http://ブログのアドレス/thickbox.js"></script>
<link rel="stylesheet" href="http://ブログのアドレス/thickbox.css" type="text/css" media="screen" />
<!--/ thickboxー -->

さて、肝心の記事の書き方ですが、サムネイルを使ってる方も
そのまま写真貼ってる方も、class="thickbox"タグの中に加えるだけでできます。

サムネイルな感じ
<a href="http://ブログのアドレス/○○○.png"class="thickbox"><img src="http://ブログのアドレス/○○○s.png" alt="○○○"border="0" /></a>

そのままな感じ
<a href="http://ブログのアドレス/○○○.png"class="thickbox"><img src="http://ブログのアドレス/○○○.png" alt="○○○"border="0" /></a>

画像を次々と続けて見たいとき。
同じ名を持つrelを数個指定することでできちゃう。
relのなかは半角英数字。

続けちゃう感じ。
<a href="http://ブログのアドレス/○○○1.png"class="thickbox"rel="abc"><img src="http://ブログのアドレス/○○○s.png" alt="○○○1"border="0" /></a>
<a href="http://ブログのアドレス/○○○2.png"class="thickbox"rel="abc"><img src="http://ブログのアドレス/○○○s.png" alt="○○○2"border="0" /></a>
<a href="http://ブログのアドレス/○○○3.png"class="thickbox"rel="abc"><img src="http://ブログのアドレスhttp://ブログのアドレス/○○○s.png" alt="○○○3"border="0" /></a>

ThickBox 3は外部HTML・PHPを表示する素晴らしい特性があります。
ですが、ここで説明しなくてもあるんで探してくださいな。

要はこんなことができる。
kiruha'sすとあへGO!!

この記事を書く際、勝手に理解して解釈してパクッたサイトは
・alishe　Thickbox 2.1を導入する　
(外部HTML・PHPを表示するやり方も書いてます！)
・Ｂｅ　ｃｏｏｌ　Ｚ＆Ｄ　ThickBox　3.1へ変更
(こっちのがいい。素晴らしく親切丁寧です。)
・ゼロからはじめるThickBox 3 - 画像もHTMLファイルもスイスイ表示
(書き換える方法は僕のはできませんでしたorz)
・誰も寝てはならぬ
(導入のきっかけ記事。)







■関連記事
ブログカスタマイズ


■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■
最後まで読んでくださりありがとうございます。
ランキングにご協力していただけると光栄です。クリックお願いします。


■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■