thickboxを使って商品画像を表示する(サブ画像も)

lightboxが好評でしたので、こんどはthickboxを紹介します。こちらはHTMLをそのまま表示できるという魅力がありますね。なので、通常の子ウィンドウでの写真表示をthickboxにそのまま乗せてみました。

thickbox

(1)モジュールをダウンロードする。

http://jquery.com/demo/thickbox/ から以下のファイルをダウンロード。

* thickbox.js
* thickbox.css
* loadingAnimation.gif
* jquery-latest.js

jquery-latest.jsはjquery.jsとリネームします。
とりあえず、html/user_data/packages/default/thickboxとディレクトリを切って、上記4ファイルをコピーします。

(2)ヘッダにセット
data/Smarty/templates/default/site_frame.tplの中の<head>と</head>の間に以下のように追加します。

<script type="text/javascript" src="<!--{$TPL_DIR}-->thickbox/jquery.js"></script>
<script type="text/javascript" src="<!--{$TPL_DIR}-->thickbox/thickbox.js"></script>
<link rel="stylesheet" href="<!--{$TPL_DIR}-->thickbox/thickbox.css" type="text/css" media="screen" />
<script>tb_pathToImage="<!--{$TPL_DIR}-->thickbox/loadingAnimation.gif";</script>

(3)画面表示に使う

それから、data/Smarty/templates/default/detail.tplの
<!–★画像★–>の下の

<a href="javascript:void(win01('./detail_image.php?product_id=<!--{$arrProduct.product_id}-->&amp;image=main_large_image<!--{if $smarty.get.admin == 'on'}-->&amp;admin=on<!--{/if}-->','detail_image','<!--{$arrFile.main_large_image.width+60}-->', '<!--{$arrFile.main_large_image.height+80}-->'))">
<img src="<!--{$arrFile[$key].filepath}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" class="picture" />
</a>

を、以下に変更

<a href="<!--{$smarty.const.URL_DIR}-->products/detail_image.php?product_id=<!--{$arrProduct.product_id}-->&image=main_large_image<!--{if $smarty.get.admin == 'on'}-->&admin=on<!--{/if}-->&TB_iframe=true&width=<!--{$arrFile.main_large_image.width+60}-->&height=<!--{$arrFile.main_large_image.height+80}-->" class="thickbox">
<img src="<!--{$arrFile[$key].filepath}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" class="picture" />
</a>

<!–★拡大する★–>の下の

<a href="javascript:void(win01('./detail_image.php?product_id=<!--{$arrProduct.product_id}-->&amp;image=main_large_image<!--{if $smarty.get.admin == 'on'}-->&amp;admin=on<!--{/if}-->','detail_image','<!--{$arrFile.main_large_image.width+60}-->', '<!--{$arrFile.main_large_image.height+80}-->'))" onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/b_expansion_on.gif','expansion01');" onMouseOut="chgImg('<!--{$TPL_DIR}-->img/products/b_expansion.gif','expansion01');">
<img src="<!--{$TPL_DIR}-->img/products/b_expansion.gif" width="85" height="13" alt="画像を拡大する" name="expansion01" id="expansion01" />
</a>

を以下に変更。

<a href="<!--{$smarty.const.URL_DIR}-->products/detail_image.php?product_id=<!--{$arrProduct.product_id}-->&image=main_large_image<!--{if $smarty.get.admin == 'on'}-->&admin=on<!--{/if}-->&TB_iframe=true&width=<!--{$arrFile.main_large_image.width+60}-->&height=<!--{$arrFile.main_large_image.height+80}-->" class="thickbox" onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/b_expansion_on.gif','expansion01');" onMouseOut="chgImg('<!--{$TPL_DIR}-->img/products/b_expansion.gif','expansion01');">
<img src="<!--{$TPL_DIR}-->img/products/b_expansion.gif" width="85" height="13" alt="画像を拡大する" name="expansion01" id="expansion01" />
</a>

変更手順は以上です。

補足ですが、
data/Smarty/templates/default/products/detail_image.tpl
のaタグで画面を閉じるというのは効かなくなりますので、はずしておいたほうがよいかもしれません。

ライセンスはMITライセンスなので、比較的自由に利用できます。

もっと応用したい方は、こちらがとても参考になります。
http://journal.mycom.co.jp/articles/2007/07/12/thickbox/index.html

追記 2009/11/06

サブ画像はどうやったらいいんですか? というご質問をいただいたので追記しておきます。

まず基本的な考え方ですが、以下のようにonclickで子ウィンドウを開いている以下のようなところを・・・

<a href="・・・detail_image.php?・・・・" onclick="win01();return false;"><img src="画像を拡大するアイコン.jpg" /></a> 

・・以下のようなclass=”thickbox”のリンクに書き換えればOKです。

<a href="拡大画像.jpg" class="thickbox"><img src="画像を拡大するアイコン.jpg" /></a> 

これがthickboxの使い方ですので、やり方がわかればいろいろ応用が利くと思います。

では、実際のサブ画像のコードの書き換えてみましょう。同じくdetail.tplの<!–サブ画像–>の下のあたりで以下のコードを探してください。

      <!--{if $arrFile[$lkey].filepath != ""}-->
        <a href="<!--{$smarty.server.PHP_SELF|escape}-->" onclick="win01('./detail_image.php?product_id=<!--{$arrProduct.product_id}-->&amp;image=<!--{$lkey}--><!--{if $smarty.get.admin == 'on'}-->&amp;admin=on<!--{/if}-->','detail_image','<!--{$arrFile[$lkey].width+60}-->','<!--{$arrFile[$lkey].height+80}-->'); return false;" target="_blank">
      <!--{/if}-->
      <!--サブ画像-->
        <img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|escape}-->" width="<!--{$smarty.const.NORMAL_SUBIMAGE_WIDTH}-->" height="<!--{$smarty.const.NORMAL_SUBIMAGE_WIDTH}-->" />
      <!--{if $arrFile[$lkey].filepath != ""}-->
        </a>
        <p>
         <a href="<!--{$smarty.server.PHP_SELF|escape}-->"
             onclick="win01('./detail_image.php?product_id=<!--{$arrProduct.product_id}-->&amp;image=<!--{$lkey}--><!--{if $smarty.get.admin == 'on'}-->&amp;admin=on<!--{/if}-->','detail_image','<!--{$arrFile[$lkey].width+60}-->','<!--{$arrFile[$lkey].height+80}-->'); return false;"
             onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/b_expansion_on.gif','expansion02');"
             onmouseout="chgImg('<!--{$TPL_DIR}-->img/products/b_expansion.gif','expansion02');" target="_blank">
            <img src="<!--{$TPL_DIR}-->img/products/b_expansion.gif" width="85" height="13" alt="画像を拡大する" />
          </a>
        </p>
      <!--{/if}-->

この部分を以下で置き換えます。

      <!--{if $arrFile[$lkey].filepath != ""}-->
        <a href="<!--{$arrFile[$lkey].filepath}-->" class="thickbox">
      <!--{/if}-->
      <!--サブ画像-->
        <img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|escape}-->" width="<!--{$smarty.const.NORMAL_SUBIMAGE_WIDTH}-->" height="<!--{$smarty.const.NORMAL_SUBIMAGE_WIDTH}-->" />
      <!--{if $arrFile[$lkey].filepath != ""}-->
        </a>
          <a href="<!--{$arrFile[$lkey].filepath}-->"
             class="thickbox"
             onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/b_expansion_on.gif','expansion02');"
             onmouseout="chgImg('<!--{$TPL_DIR}-->img/products/b_expansion.gif','expansion02');">
            <img src="<!--{$TPL_DIR}-->img/products/b_expansion.gif" width="85" height="13" alt="画像を拡大する" />
          </a>
      <!--{/if}-->

if文を見れば、$arrFile[$lkey].filepathに拡大画像のファイルパスが入っているってことに気が付きますよね。そのことに気が付けば簡単なのだと思います。