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

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


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



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




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









５．次に、「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に


を書き込む。
７．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");を書き加える。


これで完成！！！！！！！！！！！！！！