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

　ThickBoxで画像をスライドショー表示

準備は済んでいますか？

ThickBoxを使う準備が出来ていない場合は以下のページを参考に準備を行って下さい。

　ThiciBoxを使う準備
　https://aimix.jp/thickboxpre.html

スライドショーのサンプル

画像のどれかをクリックするとスライドショーで表示します。
左下に Prev 又は Next のリンクがあり、クリックすると前後に移動します。

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

前準備

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

リンクをクリックすると画像が表示される状態にしておきます。

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

1. ビルダーの操作で設定する方法

※ ソースを直接編集して設定する場合は次項 2．をご参照下さい。
　　慣れた方は直接ソースを編集する方が簡単かもしれません。

タグ一覧ビューを表示します。
画面右端に

というアイコンがありますので、これをクリックします。
上記アイコンが無い場合は「表示」 → 「タグ一覧ビュー」をクリックしてアイコンを表示させてから
操作を行って下さい。

以下の操作をスライドショーに表示したい画像に対して行います。

タグ一覧ビューを表示したまま、設定したい画像もしくは文字列を左クリックします。
下の例ではリンクを設定した画像をクリックしたところです。

青くハイライト表示された

アイコンの上に A がありますので、これをクリックします。

タグビュー下部に以下のような項目が表示されますので、下の3箇所を修正します。
入力したい部分をダブルクリックして下のように入力して下さい。

class	thickbox と入力して下さい
rel	グループ名を入力します。同じスライドショー内で表示する画像は同じグループ名を付けます。入力する名前は photo や photo1 など自分で適当な名前を付けます。
title	スライドショーの左下に表示されるタイトルです。上のサンプルでは、左から蜜蜂、水滴、雨上がり、水撒きとしました。これも自分で適当な名前を付けます。

備考

title は任意の入力項目で、入力しない場合でも正常に動作します。

2. ソースを直接編集する方法

リンクタグ内に下のように追加するだけです。
class="thickbox" rel="グループ名" title="画像のタイトル"

class	thickbox と入力して下さい（固定です）
rel	グループ名を入力します。同じスライドショー内で表示する画像は同じグループ名を付けます。入力する名前は photo や photo1 など自分で適当な名前を付けます。
title	スライドショーの左下に表示されるタイトルです。上のサンプルでは、左から蜜蜂、水滴、雨上がり、水撒きとしました。これも自分で適当な名前を付けます。

例として下のようなリンクに操作を行う場合、
<A href="1.jpg"><IMG src="s1.jpg"></A>
<A href="2.jpg"><IMG src="s2.jpg"></A>
<A href="3.jpg"><IMG src="s3.jpg"></A>

赤文字の部分を追加します
<A href="1.jpg" class="thickbox" rel="sample1" title="蜜蜂"><IMG src="s1.jpg"></A>
<A href="2.jpg" class="thickbox" rel="sample1" title="水滴"><IMG src="s2.jpg"></A>
<A href="3.jpg" class="thickbox" rel="sample1" title="工事"><IMG src="s3.jpg"></A>

タイトル（title）の部分は省略可能です。
上記の例でタイトルを省略すると以下のようになります。
<A href="1.jpg" class="thickbox" rel="sample1"><IMG src="s1.jpg"></A>
<A href="2.jpg" class="thickbox" rel="sample1"><IMG src="s2.jpg"></A>
<A href="3.jpg" class="thickbox" rel="sample1"><IMG src="s3.jpg"></A>

動作確認

以上の操作で同じグループ名を付けた画像がスライドショー表示されるようになりました。
「プレビュー」からリンクをクリックして確認してみましょう。

その他

複数のグループ

今回の例ではグループ名は1つだけでしたが、複数のグループも設置できます。
同じグループ名を付けた画像は同じスライドショー内で表示されます。

不可視の画像

表示させる画像はスタイルで不可視の状態になっているものでも結構です。
ページ上には表示せず、スライドショーだけで表示する場合は、画像を右クリックし、
「スタイルの設定」 → 「位置」 → 「属性」から「不可視」にしておきます。

動作しない場合は？

私がダウンロードしたのは ThickBox 3.1 ですが、スライドショーが正常に動作しませんでした。
この場合は thickbox.js の以下の行を修正すると動作するようになります。
テキストエディタで thickbox.js を開き、以下のように修正して下さい。

thickbox.js の 80行目あたりを見ると以下の行があります。
TB_TempArray = $("a[@rel="+imageGroup+"]").get();

これを下のように修正して保存します（@を除去するだけです）
TB_TempArray = $("a[rel="+imageGroup+"]").get();

修正したらプレビュー画面で動作するか確認を行って下さい。

備考

compressed の thickbox.js をダウンロードした場合は上記の行が見つかりません。
動作は同じですので、compressedでないthickbox.js をダウンロードしなおして下さい。