ロッカールーム
科目一覧
- EC-CUBEの基本
- カスタマイズ講座
- サービス
カスタマイズ講座
【中級】カスタマイズ6
2008.12.24 （更新日: 2009.06.05）
商品詳細ページの拡大画像ウィンドウでスクロールやリサイズを可能にする。
Follow @eccubeschool
この記事は、以下の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>
引数も同じなので省略します。
このページを見ている人は、以下のページも参照しているようです・・・！
レビュー
レビューによるご意見・ご質問は会員登録された方のみとなっております。この記事に対するトラックバック
この記事のトラックバック先URL
