2009年11月9日月曜日

EC-CUBEで商品画像を拡大するAjaxモジュール「Lightbox」

1.http://leandrovieira.com/projects/jquery/lightbox/ から ライトボックスをダウンロードする。


2.ダウンロードしたものをC:\dev\xampp\htdocs\eccube2\html\user_data\packages\defaultに解凍する。



3.解凍したfileの中のCSS folderの中のcss/jquery.lightbox-0.5.cssをC:\dev\xampp\htdocs\eccube2\html\user_data\packages\default\cssに移します。




4.今度は、「js」フォルダの中にある「jquery.lightbox-0.5.js」ファイルをエディタソフト等で開いて、30〜34行目のリンクを、先ほどアップロードしたimages」ディレクトリの位置に合わせてURLを書き換えます。経路は•html/user_data/packages/default(別のテンプレートセットを設定している場合はそちら)/js/jquery.lightbox-0.5.jsです。









5.次に、「site_frame.tpl」を修正します。下記の場所にありますので、探して下さい。これをエディタ等で開きます。

•data/Smarty/templates/default(別のテンプレートセットを設定している場合はそちら)/site_frame.tplを開きます。あそこにlink rel="stylesheet" href="<!--{$smarty.const.URL_DIR}--><!--{$smarty.const.USER_DIR}-->css/common.css" type="text/css" media="all" />
<link rel="stylesheet" href="<!--{$TPL_DIR}-->css/jquery.lightbox-0.5.css" type="text/css" media="screen" />
を書き込みます。そしてその下に
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/css.js"></script> script="" script>="" src="<!--{$TPL_DIR}-->js/site.js" type="text/javascript" <script="" ><=""></script> script> を書き込みます。
次に
\data\Smarty\templates\default\site_frame.tplに


を書き込む。
7.data\Smarty\templates\default\detail.tplのメイン画像のところに下の文に書き換える。


<a href="" class="product-main-photo">
<img src="<!--{$arrFile[$key].filepath}-->" width="" height="" alt="" />
</a>

<img src="<!--{$arrFile[$key].filepath}-->" width="" height="" alt="" />

次にサブ画像のところに
<!--{if $arrFile[$lkey].filepath != ""}-->
<a href="<!--{$arrFile[$lkey].filepath}-->" class="product-sub-photo">
<!--{/if}-->
<!--サブ画像-->
<img src="<!--{$arrFile[$key].filepath}-->" width="<!--{$smarty.const.NORMAL_SUBIMAGE_WIDTH}-->" height="<!--。{$smarty.const.NORMAL_SUBIMAGE_WIDTH}-->" alt="<!--{$arrProduct.name|escape}--" />
<!--{if $arrFile[$lkey].filepath != ""}-->
</a>
<!--{/if}-->
に書き換える。
そしてC:\dev\xampp\htdocs\eccube2\html\user_data\packages\default\cssのimport.cssに
@import url("./jquery.lightbox-0.5.css");を書き加える。


これで完成!!!!!!!!!!!!!!

1 件のコメント:

  1. すばらしい!使えるものは使っていきましょう!

    返信削除