『ThickBox』　−　最近気に入って使ってる、JavaScriptのフレームワーク（？？）

　今まで写真をホームページ上で表示させるために使ったツールで、一番簡単にできたのがこれ。　それもなんかかっこいいじゃん。　サムネイル画像をクリックした後、”グルグル”と回って写真がパッと表示される。、カッコいいじゃん。:grin:　で、やり方を忘れないうちに書き残しておきます。

：：　必要なもの　：：
１．『thickbox.js』
２．『thickbox.css』
３．『jquery.js』
４．『loadingAnimation.gif』
５．写真＋　６．その写真のサムネイル画像。　後々わかりやすい様に、『***_small.gif』『***_large.gif』と名前を付けておくと良いでしょう。
　１．〜４．までのファイルは、『ThickBox 2.1』でダウンロード出来ます。

　この６つだけ。　１．〜４．はサーバー上に『ThickBox』フォルダを作ってその中にまとめて置く（必須ではない）。　５．６．の画像は任意の場所でかまわない。

：：　使用方法　：：
１．ヘッダー部分で『thickbox.js』『thickbox.css』『jquery.js』をインクルードする。

　ex)

＜script type=”text/javascript” src=”/wp-content/plugins/thickbox/jquery.js”>
＜script type=”text/javascript” src=”/wp-content/plugins/thickbox/thickbox.js”>
＜link rel=”stylesheet” href=”/wp-content/plugins/thickbox/thickbox.css” type=”text/css” media=”screen” />

２．ギャラリー用画像のリンクを貼る。
　下の例は、実際に『 『Hong hu lotus roots』 en 南青山店』の記事で使用したコードです。

　ex)

＜a href=”http://blog.camedo.com/wordpress/pics/carry/2006-11-05/lotus roots/letrero_grande.JPG” title=”看板” class=”thickbox” rel=”lotus-roots”>＜img src=”http://blog.camedo.com/wordpress/pics/carry/2006-11-05/lotus roots/letrero_pequeno.jpg” alt=”看板” />

＜a href=”http://blog.camedo.com/wordpress/pics/carry/2006-11-05/lotus roots/carri_amarillo_grande.JPG” title=”豚肉イエローカレー” class=”thickbox” rel=”lotus-roots”>＜img src=”http://blog.camedo.com/wordpress/pics/carry/2006-11-05/lotus roots/carri_amarillo_pequeno.jpg” alt=”イエローカレー” />

＜a href=”http://blog.camedo.com/wordpress/pics/carry/2006-11-05/lotus roots/carri_verde_grande.JPG” title=”鶏肉と茄子のグリーンカレーライス” class=”thickbox” rel=”lotus-roots”>＜img src=”http://blog.camedo.com/wordpress/pics/carry/2006-11-05/lotus roots/carri_verde_pequeno.jpg” alt=”鶏肉と茄子のグリーンカレーライス” />

　：：　勘所　：：
　緑色　＝　クリック後に表示される画像に付いてくる言葉
　青色　＝　class=”thickbox” は必ず付けてください
　赤色　＝　rel=”任意の名前” でギャラリィーのグループ化をします。　これを合わせないと写真は一枚しか表示されません。 :|

内容が近い？？過去の記事:

  1. 『Hong hu lotus roots』 en 南青山店
  2. Thickbox Garally を試す