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

　ThickBoxで画像をポップアップ表示

ThickBoxについて

ThickBoxはページ内で画像をポップアップ表示したり、スライドショーを実現できるjQueryのプラグインです。
このページでは初めて設置する方を対象に説明してありますが、jQueryが既に設置してある場合は、その部分を
飛ばしてお読み下さい。

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

1. ThickBoxのダウンロード

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

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

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

thickbox.js
thickbox.css
jquery.js

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

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

備考

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

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

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

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

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

備考

直接HTMLソースに追記する場合は <head> ～ </head> の間に追加します。
jQueryが設置済みの場合は最上部の1行を除く下の2行のみ追加して下さい。

3. リンク設定の変更

画像へのリンクを設置します。
リンクはテキストでも画像でも良く https:// から始まるURLでも結構です。

※ リンク方法については省略させて頂きます。

次に対象のリンクを右クリックし「リンクの設定」を選択します。

スタイルをクリックします。

「定義済みクラスの指定」に thickbox と入力してOKボタンを押せば完了です。

備考

複数ある場合は「リンクの設定」 → 「スタイル」 → 「定義済みクラスの指定に thickbox を入力してOKボタン」
の手順を対象のリンクに対して行います。
「定義済みクラスの指定」が、 thickbox と設定されているリンクがポップアップの動作をします。
これを設定していないリンクは通常通りの動作をします。

動作確認

以上の操作でリンク先の画像がポップアップ表示されるようになりました。
「プレビュー」からリンクをクリックして確認してみましょう。

ThickBox は複数の画像をスライドショーで表示したり、htmlファイル中の文字列を
表示したり、htmlファイルそのものをインラインフレームで表示したりもできます。

注意事項

thickbox.css を適用すると全体へ適用されるマージンとパディングが0になります。
thickbox.css を編集して値を変更するか、思った表示にならない場合は当該部分の属性から
マージンとパディングを修正する必要があります。

例えばリストを挿入した際に先頭の・が無くなってしまう等です。
この場合は <UL> にマージンとパディングを 10 と設定してやる事で回避できます。