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

　ThickBoxを使う準備

ThickBoxについて

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

サンプル（画像をクリック）

このページについて

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

1. ThickBoxのダウンロード

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

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

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

thickbox.js
thickbox.css
jquery.js
loadingAnimation.gif

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

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

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

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

https://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 とか記載されていますので、これに合わせます。