ホームページビルダー・グレート初心者講座

Yahoo!ブックマークに登録

グレート初心者講座トップへグレート初心者講座 小技集へグレート初心者講座 FAQへグレート初心者講座 質問掲示板へ





 ThickBoxを使う準備

ThickBoxについて

ThickBoxはjQueryのプラグインで、画像をポップアップ表示したりスライドショーを実現できます。

サンプル(画像をクリック)



このページについて

ThickBoxは画像のポップアップやスライドショーなど様々な事ができますが、
ここでは共通の操作となる準備の説明のみを行います。



   1. ThickBoxのダウンロード

下のサイトから4つのファイルをダウンロードします。

ThickBox
http://jquery.com/demo/thickbox/


左クリックするとソースがそのまま表示されてしまいますので、右クリックから保存します。
ダウンロードするのは以下のスクリーンショットにある4つです。
ダウンロードしたら設置するhtmlファイルと同じディレクトリに3つのファイルをコピーします。
loadingAnimation.gif は htmlファイルのディレクトリに images というディレクトリを作成してそこへコピーします。
  • thickbox.js
  • thickbox.css
  • jquery.js
  • loadingAnimation.gif

今回ダウンロードしたファイルのリンク先は以下の4つです。

http://jquery.com/demo/thickbox/thickbox-code/thickbox.js

http://jquery.com/demo/thickbox/thickbox-code/thickbox.css

http://jquery.com/src/jquery-latest.js

http://jquery.com/demo/thickbox/images/loadingAnimation.gif







備考

loadingAnimation.gif は画像のロード中に表示されるアニメーションGIFです。

compressed と記載されているものはサイズが小さくなっており、自分でスクリプトを編集しない場合は
こちらを選択すれば良く、動作はどちらも同じです。

こちらのファイルをダウンロードする場合、
thickbox-compressed.js は thickbox.js に、
jquery-latest.pack.js は jquery.js に、
ダウンロード時または保存後に修正して下さい。





   2. ヘッダ内にタグを追加

ビルダーの 「編集」 → 「ページの属性」 とクリックし 「その他」のタブをクリックします。

「その他のHTMLタグ」 と記載された入力枠がありますので、そこへ以下の3行を追加します。
追加したら 「OK」 ボタンをクリックして下さい。


備考

直接HTMLソースに追記する場合は <head> 〜 </head> の間に追加します。



以上で準備が完了しました。







  トラブル

実行時にエラーが出たり、文字化けする等の場合はHTMLファイルと thickbox.js の文字コードが
異なっている可能性があります。
この場合はHTMLファイルかthickbox.js のどちらかを変更して同じ文字コードにします。

HTML側の文字コードを変更する場合は、
ページの保存時に ファイル → 出力漢字コード で出力する漢字コードを選択して保存します。

thickbox.js側の文字コードを変更する場合は、
例えばテキストエディタ TeraPad の場合、thickbox.js を開き、「ファイル」 から 「文字/改行コード指定保存」
を選択してHTMLファイルと同じ文字コードを選択して保存すれば結構です。
HTMLファイルの文字コードはビルダーでは 「編集」 → 「ページの属性」 から値に charset= と記載された
部分を確認すると Shift_JIS とか UTF-8 とか記載されていますので、これに合わせます。







| トップページへ | 小技集 | FAQ | 質問掲示板 | 免責事項  | リンクについて  | お問い合わせ  |
ホームページビルダー・グレート初心者講座 Copyright © 2002-2005 aimix All Rights Reserved