«
»

06/30

2008

EC-CUBEにthickbox

今日はEC－CUBEにthickboxを入れてみます。
画像などが、ビヨーンと出てくるやつです。lightboxでもいいのですが、マイブームはthickboxなので。
EC-CUBE2.1.2
CORESERVERです。

data/Smarty/templates/テンプレート名/site_frame.tpl
を編集するのです。

このファイルは、サーバーにできてるので、ダウンロードして編集してアップロードしましょう。

1.thickboxをダウンロード

画像やhtmlファイルがビヨーンと出てくる、thickboxやlightboxをダウンロードして、一番上の階層にでも入れます。jsフォルダを作って入れました。

2.<head>にjs読み込み記述

site_frame.tplのヘッダ部分に以下を追加して、thickbox.jsを読み込むようにします。
35行目あたりがいいかな？


<script type="text/javascript" src="<!--{$smarty.const.SITE_URL}-->js/jquery.js"></script>
<script type="text/javascript" src="<!--{$smarty.const.SITE_URL}-->js/thickbox.js"></script>
<link rel="stylesheet" href="<!--{$smarty.const.SITE_URL}-->js/thickbox.css" type="text/css" media="all">

3.商品詳細ページをちょっといじる

画像を拡大表示させたいところに、class=”thickbox”をつけたaタグを書いて、拡大画像にリンクします。


<a href="<!--{$arrFile.main_large_image.filepath}-->" target="_blank" class="thickbox">
   <img src="<!--{$arrFile[$key].filepath}-->" width="<!--{$smarty.const.NORMAL_IMAGE_WIDTH}-->" height="<!--{$smarty.const.NORMAL_IMAGE_HEIGHT}-->" alt="<!--{$arrProduct.name|escape}-->" class="picture" />
</a>

サブ画像のところはこんな風に・・・。


<a href="<!--{$arrFile[$lkey].filepath}-->" target="_blank" class="thickbox">
<img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|escape}-->" width="<!--{$smarty.const.NORMAL_SUBIMAGE_WIDTH}-->" height="<!--{$smarty.const.NORMAL_SUBIMAGE_WIDTH}-->" class="picture" />
</a>

これで、拡大画像を表示するときに、ビヨ～ンって出てくるようになるのですよ。

他にも、Ajaxを入れたくなったら、site_frame.tplに追加していくことにします。

カテゴリ、タグ

CORESERVER EC-CUBE

trackback :

コメントする？

Powered by WP Hashcash

a