TORAT
lightboxを使って商品画像を表示する
EC-CUBE 商品詳細ページ商品画像をlightboxで表示する。
商品画像拡大表示をlightboxで表示する。
| EC-CUBEバージョン | 2.4.1 |
| PHPバージョン | PHP 5.2.6 |
| DBバージョン | MySQL 5.0.51a-community-log |
1.lightboxをダウンロードする。
lightbox2.04.zip をダウンロード
2.上の３つのフォルダをアップロードする。
アップロード先
html/user_data /packages/default/lightbox
＊lightboxというファルダを作成する。
＊index.html以外をアップロード
EC-CUBEのファイルを書き換える
data/Smarty/templates/default/detail.tpl
data/Smarty/templates/default/site_frame.tpl
1.書き換えるファイルは上記の２ファイル
data/Smarty/templates/default/detail.tpl
【修正箇所】
1,５９行目付近にある
<!--{assign var=key value="main_image"}-->
の下に
<!--{assign var=keyl value="main_large_image"}-->
を追加します。
—————————————————————————————————-
2,61行目付近にある
<!–★画像★–>の下の
<a href="javascript:void(win01('./detail_image.php?product_id=
<!--{$arrProduct.product_id}-->&image=main_large_image
<!--{if $smarty.get.admin == 'on'}-->&admin=on<!--{/if}-->','detail_image','
<!--{$arrFile.main_large_image.width+60}-->', '
<!--{$arrFile.main_large_image.height+80}-->'))">
<img src="<!--{$arrFile[$key].filepath}-->
" width="<!--{$arrFile[$key].width}-->" height="
<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" />
</a>
を以下に書き換えます。
<a href="<!--{$arrFile[$keyl].filepath}-->" rel="lightbox">
<img src="<!--{$arrFile[$key].filepath}-->" width="
<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->
" alt="<!--{$arrProduct.name|escape}-->" />
</a>
-----------------------------------------------------------------------
3,<!–★拡大する★–>の下の
<a href="javascript:void(win01('./detail_image.php?product_id=
<!--{$arrProduct.product_id}-->&image=main_large_image
<!--{if $smarty.get.admin == 'on'}-->&admin=on<!--{/if}-->','
detail_image','<!--{$arrFile.main_large_image.width+60}-->', '
<!--{$arrFile.main_large_image.height+80}-->'))" onmouseover="chgImg
('<!--{$TPL_DIR}-->img/products/b_expansion_on.gif','expansion01');"
onMouseOut="chgImg('<!--{$TPL_DIR}-->img/products/b_expansion.gif','expansion01');">
<img src="<!--{$TPL_DIR}-->img/products/b_expansion.gif"
width="85" height="13" alt="画像を拡大する" name="expansion01" id="expansion01" />
</a>
を以下に書き換えます。
<a href="<!--{$arrFile[$keyl].filepath}-->" rel="lightbox"
onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/b_expansion_on.gif','
expansion01');" onMouseOut="chgImg('<!--{$TPL_DIR}-->
img/products/b_expansion.gif','expansion01');">
<img src="<!--{$TPL_DIR}-->img/products/b_expansion.gif"
width="85" height="13" alt="画像を拡大する" name="expansion01" id="expansion01" />
</a>
data/Smarty/templates/default/site_frame.tpl
【修正箇所】
1,<head>と</head>の間に以下を追加。
<script type="text/javascript" src="<!--{$TPL_DIR}-->
lightbox/js/prototype.js"></script>
<script type="text/javascript" src="<!--{$TPL_DIR}-->
lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="<!--{$TPL_DIR}-->
lightbox/js/lightbox.js"></script>
<script>LightboxOptions.fileLoadingImage="<!--{$TPL_DIR}-->
lightbox/images/loading.gif"; </script>
<script>LightboxOptions.fileBottomNavCloseImage="<!--{$TPL_DIR}-->
lightbox/images/closelabel.gif"; </script>
<link rel="stylesheet" href="<!--{$TPL_DIR}-->
lightbox/css/lightbox.css" type="text/css" media="screen" />
