EC-CUBEの小技:商品詳細ページのサムネイルをクリックで拡大

2012年5月16日 10:47
以前にEC-CUBEの小技:商品ページで商品画像をサムネイルで切り替えの記事でサムネイルを使った画像拡大の方法を紹介しました。

今回は、切り替えなくても、サムネイルクリックで画像が拡大する方法をご紹介します。
この記事は最終更新日から1年以上が経過しています。

おさらい参照、一文で完了

前回のEC-CUBEの小技:商品一覧ページの画像をクリックで拡大する方法で紹介した文が役に立ちます。
以下が前回、紹介したものです。

<!--{* サブ画像 *}-->
<div class="sub_img clearfix">
<ul>
<!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
<!--{assign var=ikey value="sub_image`$smarty.section.cnt.index+1`"}-->
<!--{if $arrProduct[$key] != "" or $arrProduct[$ikey]|strlen >= 1}-->
<!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}-->
<!--{assign var=key2 value="sub_image`$smarty.section.cnt.iteration`"}-->
<!--{if $arrProduct[$ikey]|strlen >= 1}-->
<li><a href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" class="expansion" onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_expansion_on.gif', 'expansion_<!--{$lkey|h}-->');" onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_expansion.gif', 'expansion_<!--{$lkey|h}-->');" target="_blank" >
<img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrProduct.$key2|h|nl2br}-->&amp;width=80&amp;height=80" alt="<!--{$arrProduct.$key1|h}-->" />
</a></li>
<!--{/if}-->
<!--{/if}-->
<!--{/section}-->
</ul>
</div>
<!--{* サブ画END *}-->

上記を以下のように改良して
/ec/data/Smarty/templates/default/products/detail.tpl
88行目付近を書き換え(サムネイルを設置している場合)

<!--{if $arrProduct.main_large_image|strlen >= 1}-->
<!-- サブ画像 -->
<div class="thumbnail">
<!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
<!--{assign var=ikey value="sub_image`$smarty.section.cnt.index+1`"}-->
<!--{if $arrProduct[$key] != "" or $arrProduct[$ikey]|strlen >= 1}-->
<!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}-->
<!--{assign var=key2 value="sub_image`$smarty.section.cnt.iteration`"}-->
<!--{if $arrProduct[$ikey]|strlen >= 1}-->
<a href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" class="expansion" onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_expansion_on.gif', 'expansion_<!--{$lkey|h}-->');" onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_expansion.gif', 'expansion_<!--{$lkey|h}-->');" target="_blank" >
<img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrProduct.$key2|h|nl2br}-->&amp;width=80&amp;height=80" alt="<!--{$arrProduct.$key1|h}-->" />
</a>
<!--{/if}-->
<!--{/if}-->
<!--{/section}-->
</div> 
<!--{/if}-->

こちらは使い回すだけだったので、簡単でした。
PHPの方に追加もいりませんし。
以上です。

ブログ運営

株式会社ちょもらんま

https://qomolangma.jp