カスタマイズ講座

ホーム > カスタマイズ講座 > 【中級】カスタマイズ > 商品詳細ページの拡大画像ウィンドウでスクロールやリサイズを可能にする。

商品詳細ページの拡大画像ウィンドウでスクロールやリサイズを可能にする。

【中級】カスタマイズ6
2008.12.24 (更新日: 2009.06.05)

この記事は、以下のEC-CUBEコミュニティのスレッドにて質問があったものを、分かりやすく再掲載させて頂いている内容になります。


詳細ページなどで商品写真の拡大画像がある場合、別ウィンドウで小さな小窓が開き、その中に拡大画像が表示されるような仕組みがあります。これはJavascriptで実現していて、3種類のウィンドウの表示方法があります。それぞれ「win01」、「win02」、「win03」という名前がついていますが、実際によく使うのは「win01」、「win02」だけで、「win03」はあまり使わないかもしれません(管理画面やMyページで使われているようです)。

ここでは、「win01」と「win02」の使い分けについて説明していきます。

「win01」・・・スクロール無し、サイズ固定の別ウィンドウ(小ウィンドウ)を開く
※IE6ではサイズが固定されますが、Firefoxではリサイズ可能のようです。

使用例
<a class="lnk_noline" href="<!--{$smarty.server.PHP_SELF|escape}-->" 
onclick="win01(
'./detail_image.php?product_id=<!--{$arrProduct.product_id}-->&image=<!--{$lkey}--><!--{if $smarty.get.admin == 'on'}-->&admin=on<!--{/if}-->', ← 第1引数
'detail_image', ← 第2引数
'<!--{$arrFile[$lkey].width+60}-->', ← 第3引数
'<!--{$arrFile[$lkey].height+80}-->' ← 第4引数
);
return false;" target="_blank">
<!--サムネイル画像-->
<img src="画像パス" width="画像幅" height="画像高" alt="説明" />
</a>

  • 第1引数には、表示するページ内容(つまりURL)を設定します。
  • 第2引数には、開くウィンドウの名前を指定します。
  • 第3引数には開くウィンドウの幅(ピクセル単位)を指定します。
  • 第4引数には開くウィンドウ高(ピクセル単位)を指定します。



「win02」・・・スクロール有り、リサイズ可能の別ウィンドウ(小ウィンドウ)を開く

ほとんどというか、win01がwin02になるだけで、他はすべて一緒です。簡単ですね。

使用例
<a class="lnk_noline" href="<!--{$smarty.server.PHP_SELF|escape}-->" 
onclick="win02(
'./detail_image.php?product_id=<!--{$arrProduct.product_id}-->&image=<!--{$lkey}--><!--{if $smarty.get.admin == 'on'}-->&admin=on<!--{/if}-->', ← 第1引数
'detail_image', ← 第2引数
'<!--{$arrFile[$lkey].width+60}-->', ← 第3引数
'<!--{$arrFile[$lkey].height+80}-->' ← 第4引数
);
return false;" target="_blank">
<!--サムネイル画像-->
<img src="画像パス" width="画像幅" height="画像高" alt="説明" />
</a>


引数も同じなので省略します。

このページを見ている人は、以下のページも参照しているようです・・・!

>> EC-CUBEの学校のページ参照は、レコメンドエンジン「楽レコ」でレコメンデーションしています!

レビュー

レビューによるご意見・ご質問は会員登録された方のみとなっております。

この記事に対するトラックバック

この記事のトラックバック先URL

ECの「勝ち組」だけが知っている 売り上げUPの秘密はこちら