lightboxを使って商品画像を表示する

商品画像を表示するときにlightboxを使うと高級感が演出できますよね。こんな感じです。
lb2
そこで、商品詳細でlightboxを使う方法を紹介したいと思います。
画像をクリックしたときと画像を拡大するをクリックすると、lightboxで表示されます。

(1)モジュールをダウンロードする。
http://www.lokeshdhakar.com/projects/lightbox2/ から lightbox2.04.zip をダウンロードします。zipの中のindex.htmlに使い方が書いてあります。簡単そうですね。とりあえず、html/user_data/packages/default/lightboxにディレクトリを切って、zipの中身をまるごとコピーします。
(2)ヘッダにセット
data/Smarty/templates/default/site_frame.tplの中の<head>と</head>の間に以下のように追加します。

<script type="text/javascript" src="<!--{$TPL_DIR}-->lightbox/js/prototype.js"></script>
<script type="text/javascript" src="<!--{$TPL_DIR}-->lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="<!--{$TPL_DIR}-->lightbox/js/lightbox.js"></script>
<script>LightboxOptions.fileLoadingImage="<!--{$TPL_DIR}-->lightbox/images/loading.gif"; </script>
<script>LightboxOptions.fileBottomNavCloseImage="<!--{$TPL_DIR}-->lightbox/images/closelabel.gif"; </script>

<link rel="stylesheet" href="<!--{$TPL_DIR}-->lightbox/css/lightbox.css" type="text/css" media="screen" />


(3)画像表示に使う
それから、data/Smarty/templates/default/detail.tplの

<!--{assign var=key value="main_image"}-->


の行の下に

<!--{assign var=keyl value="main_large_image"}-->


を追加します。
<!–★画像★–>の下の

<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="<!--{$arrFile[$keyl].filepath}-->" rel="lightbox">
<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="<!--{$arrFile[$keyl].filepath}-->" rel="lightbox" 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>


ファイルパスはインストールした環境に合わせて調整してください。ちなみにライセンスはクリエイティブコモンの表示2.5ということでして、原作者のクレジット表示をそのままにしておく義務があります。商用利用はOKです。
http://creativecommons.org/licenses/by/2.5/