質問 > フロント機能 > 【2.11.2】商品詳細ページのサブ画像をサムネイル化し画像を切り替える |
フロント機能
フラット表示 | 前のトピック | 次のトピック |
投稿者 | スレッド |
---|---|
by0448 |
投稿日時: 2011/10/30 23:36
対応状況: −−−
|
長老 ![]() ![]() 登録日: 2011/9/12 居住地: 横浜市 投稿: 186 |
【2.11.2】商品詳細ページのサブ画像をサムネイル化し画像を切り替える ―環境―――――――――――――
EC-CUBE 2.11.2 MySQL 5.1.34-log PHP 5.2.17 ―――――――――――――――― 商品詳細ページでは、メイン画像が一枚あって、それを拡大し、サブ画像はサブの枠があり、そちらで拡大するようにできていますが、そのサブ画像をメインの枠でサムネイルとして置き、クリックして切り替え、同じように拡大したいと考えています。 この機能ですが、2.4.4では動いていたものの、2.11では機能しなくなりました。 以下がその内容です。 ―――――――――――――――――――――――――――――――― <script type="text/javascript">//<![CDATA[ exchangeLargeSmall.params = { main: {name:"main",src:"<!--{$arrFile.main_image.filepath}-->",width:<!--{$arrFile.main_image.width}-->,height:<!--{$arrFile.main_image.height}--> ,large:"main_large_image",largewidth:<!--{$arrFile.main_large_image.width+60}-->,largeheight:<!--{$arrFile.main_large_image.height+80}--> } <!--{if $arrFile.sub_image1.filepath != ''}-->, sub1:{name:"sub1",src:"<!--{$arrFile.sub_image1.filepath}-->",width:<!--{$arrFile.sub_image1.width}-->,height:<!--{$arrFile.sub_image1.height}--> ,large:"sub_large_image1",largewidth:<!--{$arrFile.sub_large_image1.width+60}-->,largeheight:<!--{$arrFile.sub_large_image1.height+80}--> }<!--{/if}--> <!--{if $arrFile.sub_image2.filepath != ''}-->, sub2:{name:"sub2",src:"<!--{$arrFile.sub_image2.filepath}-->",width:<!--{$arrFile.sub_image2.width}-->,height:<!--{$arrFile.sub_image2.height}--> ,large:"sub_large_image2",largewidth:<!--{$arrFile.sub_large_image2.width+60}-->,largeheight:<!--{$arrFile.sub_large_image2.height+80}--> }<!--{/if}--> <!--{if $arrFile.sub_image3.filepath != ''}-->, sub3:{name:"sub3",src:"<!--{$arrFile.sub_image3.filepath}-->",width:<!--{$arrFile.sub_image3.width}-->,height:<!--{$arrFile.sub_image3.height}--> ,large:"sub_large_image3",largewidth:<!--{$arrFile.sub_large_image3.width+60}-->,largeheight:<!--{$arrFile.sub_large_image3.height+80}--> }<!--{/if}--> }; function exchangeLargeSmall(obj) { smallObj = obj; largeObj = document.getElementById('detailphotobig'); small = exchangeLargeSmall.params[smallObj.className]; if (small.large==undefined) { largeObj.innerHTML = '<img width="430px" src="' + small.src + '" alt="<!--{$arrProduct.name|escape}-->" class="picture" />'; } else { $(document).ready( function() { largeObj.innerHTML = '<a class="expansion" href="<!--{$smarty.const.ROOT_URLPATH}-->products/detail/<!--{$arrProduct.product_id}-->&image=' + small.large +'">' + '<img width="430px" src="'+ small.src+'" alt="<!--{$arrProduct.name|escape}-->" class="picture" />'+ '</a>'; $(".expansion").colorbox(); }); } } //]]> </script> <!--▼CONTENTS--> <div class="detail_mainbox clearfix"> <div id="detailarea" class="clearfix"> <div id="detailphotobig" class="large"> <!--{assign var=key value="main_image"}--> <!--{if $arrProduct.main_large_image != ""}--> <!--★画像★--> <a class="expansion" href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_large_image|h}-->" > <img width="430px" src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|escape}-->" class="picture" /></a> <!--★拡大する★--> <!--{else}--> <a class="expansion" href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_large_image|h}-->" > <img src="<!--{$arrFile[$key].filepath}-->" style="max-width:260px;" alt="<!--{$arrProduct.name|escape}-->" class="picture" /></a> <!--{/if}--> </div> <!--★入れ替えミニ画像★--> <div class="detailphotomini clearfix"> <img src="<!--{$arrFile.main_image.filepath}-->" width="75" style="display:float;cursor:pointer;" onclick="exchangeLargeSmall(this);" class="main" /> <!--{if $arrFile.sub_image1 != ""}--> <img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH|sfTrimURL}-->/<!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->" width="75" style="display:float;cursor:pointer;" onclick="exchangeLargeSmall(this);" class="sub1" /> <!--{/if}--> <!--{if $arrFile.sub_image2 != ""}--> <img src="<!--{$arrFile.sub_image2.filepath}-->" style="display:float;cursor:pointer;" width="75" onclick="exchangeLargeSmall(this);" class="sub2" /> <!--{/if}--> <!--{if $arrFile.sub_image3 != ""}--> <img src="<!--{$arrFile.sub_image3.filepath}-->" style="display:float;cursor:pointer;" width="75" onclick="exchangeLargeSmall(this);" class="sub3" /> <!--{/if}--> </div> </div> ―――――――――――――――――――――――――――――――― これらを修正してやりたいことが3つあります。 1.切り替え時のメイン画像に登録画像の一番大きいもの[500×500]を呼び出し、それを少しだけ縮めて表示する。 2.拡大画像は一番大きいものを呼び出す。 3.サムネイル画像は一番小さいもの[130×130]を呼び出し表示する。 この3つを可能にするには、どのように書き換えたらよいのでしょうか? どなたか、ご教授いただきたく、よろしくお願いいたします。 |
フラット表示 | 前のトピック | 次のトピック |
題名 | 投稿者 | 日時 |
---|---|---|
» ![]() |
by0448 | 2011/10/30 23:36 |
![]() |
ECCUORE | 2011/10/31 9:51 |
![]() |
by0448 | 2011/10/31 11:49 |
![]() |
by0448 | 2011/11/1 1:16 |
![](images/pixel.gif)