EC-CUBEの小技:商品一覧ページの画像をクリックで拡大

2012年5月16日 10:33
以前に、EC-CUBEの小技:商品一覧ページにサブ画像を表示【Ver.2.11.5】という記事を書きましたが、サブ画像を表示するだけでなく、その画像を拡大する方法を今回はご紹介します。
この記事は最終更新日から1年以上が経過しています。

修正ファイルは二か所

まず、フェイスボックスのjqueryを一覧ページでも作動させる文の追加
/data/Smarty/templates/default/products/list.tpl
23行目付近と62行目付近に以下を追加

23行目
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.facebox/facebox.js"></script>
<link rel="stylesheet" type="text/css" href="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.facebox/facebox.css" media="screen" />

62行目
$(document).ready(function() {
    $('a.expansion').facebox({
        loadingImage : '<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.facebox/loading.gif',
        closeImage   : '<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.facebox/closelabel.png'
    });
});

次に一覧ページに表示されているサブ画像に拡大画像のリンクを貼る
同ファイル
176行目付近と215行目付近を以下に書き換え(サブ画像を表示している場合)

 
176行目
<!--★画像★-->
<a href="<!--{$smarty.const.IMAGE_SAVE_URLPATH|sfTrimURL}-->/<!--{$arrProduct.main_large_image}-->" class="expansion" target="_blank">
 <img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->" alt="<!--{$arrProduct.name|h}-->" class="picture" /></a>

215行目
<!--{* サブ画像 *}-->
<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 *}-->

最後に拡大画像の一覧ページに呼び込む
/data/class_extends/SC_Product_Ex.php
64行目付近に以下を追加

,main_large_image
,sub_large_image1
,sub_large_image2
,sub_large_image3
,sub_large_image4
,sub_large_image5

以上です。
リンクさせるまでは簡単ですが、拡大画像を呼び込むのを知らなかったりしたので、多少面倒でした。

ブログ運営

株式会社ちょもらんま

https://qomolangma.jp