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

　ThickBox （タイトルや文字の変更）

ThickBoxの基本的な設置方法について

ThickBoxで画像を表示する基本的な手順は以下のページでご確認下さい。

　ThickBoxで画像をポップアップ表示
　https://aimix.jp/thickbox.html

このページの説明内容について

このページは設置したポップアップ画像に表示されるタイトルやスライドショーの
Prev Next リンクの文字列変更などの説明です。

タイトルの表示

タイトルは ThickBoxで表示するように設定されたリンクタグに title="タイトル" を追加するだけです。
下のサンプルではタイトルを水滴にしています。

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

設定したリンクを左クリックし、「HTMLソース」に切り替えます。
カーソルが点滅しているあたりにある class="thickbox" の行を探し、以下のように追加します。

追加前
<A href="images/1.jpg" class="thickbox">
<IMG src="images/2.jpg" width="160" height="105" border="0">
</A>

追加後
<A href="images/1.jpg" class="thickbox" title="水滴">
<IMG src="images/2.jpg" width="160" height="105" border="0">
</A>

修正したらタイトルが正しく表示されているか「プレビュー」で確認しておきましょう。

ポップアップの操作リンクを日本語で表示

thickbox.js をテキストエディタで開いて修正します。

close or Esc Key の文字を変更

close</a> or Esc Key の文字を検索して文字列を修正します。
3箇所ありますので、3箇所とも修正を行っておきます。

修正前
close</a> or Esc Key

修正後
閉じる</a> 又はESCキー

修正後の文字列は好みの文字列で結構です。

Prev と Next の文字を変更

修正前
<a href='#'>Next ></a>

<a href='#'>< Prev</a>

修正後
<a href='#'>次 ></a>

<a href='#'>< 前</a>

私が編集した際はそれぞれ 86行目と90行目に上記行がありました。
こちらも修正後の文字列は好みの文字列で結構です。

文字列ではなく画像のリンクにする

上記のリンク等はそのまま出力されますので、例えば閉じるリンクを
画像の×印等に変更したい場合は、×印のアイコンを用意しておき、
IMGタグで指定してもOKです。
ただし、JavaScriptの書式の決まりで " の中に " を入れる事は出来ないため
" を \" としてエスケープするか " を ' に置き換える必要があります。

例えば以下のようなIMGタグにする場合、
<IMG src="close.gif" width="13" height="13" border="0">

下のように " の前に \ を置いて \" とするか、
<IMG src=\"close.gif\" width=\"13\" height=\"13\" border=\"0\">

下のように " を　' にします。
<IMG src='close.gif' width='13' height='13' border='0'>

※ " は半角ダブルクォーテーション、 ' は半角シングルクォーテーションです。

ページのスタイルが崩れてしまう場合は？

thickbox.css は全体に適用されるパディングとマージンの値が0になっており、
これはポップアップ画面だけでなくページ全体に適用されてしまいます。

これが嫌な場合は thickbox.css をテキストエディタで開き、最上部付近にある
以下の行を削除するかコメントアウトします。
{padding: 0; margin: 0;}

試してみましたが、ポップアップ表示画面が崩れたようには見えませんでしたので、
これが嫌な場合は上記行を削除すれば良いと思います。

暗くなる周囲の色の変更

thickbox.css から .TB_overlayBG で始まる以下の行を探します。

.TB_overlayBG {
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}

変更箇所と意味

#000
暗くなる周囲の色を指定します。
ビルダーのカラーパレットや検索エンジンでカラーチャートなどと検索して
好みの色を指定します。
例えば #3057a2 とか #000000 とかの値に変更します。

75 と 0.75（2箇所）の値

これらの値は暗くなる周囲の色の透明度を指定します。
数値が大きくなるほど透明度が低く（濃い）、小さくなるほど透明度が高く（薄く）なります。
75の値は最大が 100 で、0.75 は最大が 1 となります。
3箇所あるのは、多くのブラウザに対応させるためです。

ポップアップ枠の色変更

thickbox.css から #TB_window で始まる以下の行を探します。

#TB_window {
position: fixed;
background: #ffffff;
z-index: 102;
color:#000000;
display:none;
border: 4px solid #525252;
text-align:left;
top:50%;
left:50%;
}

これらの色もビルダーのカラーパレットや検索エンジンからカラーチャートと
検索して好みの色を指定して下さい。
上記デフォルト設定と、変更される箇所は以下のスクリーンショットでご確認下さい。
枠線のサイズとスタイルは border: 4px solid の箇所を変更します。

備考

変更後に文字化けしてしまう場合、HTMLファイルとthickbox.js の文字コードが
異なっている可能性があります。
HTMLファイル側を変更する場合は「ファイル」 → 「名前を付けて保存」から「出力漢字コード」を
thickbox.js と同じ漢字コードにします。
テキストエディタ TeraPad の場合 thickbox.js 側の文字コードを確認するには、TeraPadで
thickbox.js を開き「ファイル」 → 「文字コード指定再読み込み」をクリックして、選択状態（灰色）
になっている漢字コードを確認します。

thickbox.js側を変更する場合は上記TeraPadの場合、
「ファイル」 → 「文字/改行コード指定保存」から漢字コードを指定して保存します。