kansou mimizu

テキスト

内容へジャンプ

このコンテンツの過去ログページへ このコンテンツのトップページへ

コンテンツ内検索

最新記事10件

TEXT 記事ページ

EC CUBE に Lightbox2.0 を導入

2008-09-21 この記事のカテゴリー:メモ この記事へのコメント:6

EC CUBE に Lightbox2 を導入する方法。忘れないようにメモ。

下記は、アップロード先を、 html/user_date/lightbox にした場合。状況によって要修正。

Lightbox2 を DL して解凍して、出来たフォルダ名を「lightbox」に変更、構成はこんな感じ。

lightbox
　├ css
　├ images
　├ js

lightbox/js/lightbox.js の49行目付近にある、画像パスを修正 ( 絶対パスで記述 )。

修正前 
fileLoadingImage:        'images/loading.gif',     
fileBottomNavCloseImage: 'images/closelabel.gif',
修正後 
fileLoadingImage:        'http://***.**.**/user_data/lightbox/images/loading.gif',
fileBottomNavCloseImage: 'http://***.**.**/user_data/lightbox/images/closelabel.gif',
※ http://***.**.** はショップ URL 。

「lightbox」フォルダごと、html/user_date ディレクトリ内へ場所へアップロード。
( html/user_date/lightbox となる )
lightbox2.0 を動かすための記述を、以下のテンプレートに。

head 〜 head 内、date/Smarty/templates/テンプレ名/site_frame.tpl　35行目付近に追加

<script type="text/javascript" src="<!--{$smarty.const.URL_DIR}--><!--{$smarty.const.USER_DIR}-->lightbox/js/prototype.js"></script>
<script type="text/javascript" src="<!--{$smarty.const.URL_DIR}--><!--{$smarty.const.USER_DIR}-->lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="<!--{$smarty.const.URL_DIR}--><!--{$smarty.const.USER_DIR}-->lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="<!--{$smarty.const.URL_DIR}--><!--{$smarty.const.USER_DIR}-->lightbox/css/lightbox.css" type="text/css" media="screen" />

商品説明ページ、date/Smarty/templates/テンプレ名/detail.tpl　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}-->" class="picture" />
</a>
修正後 
<a href="<!--{$arrFile.main_large_image.filepath}-->" rel="lightbox">
<img src="<!--{$arrFile[$key].filepath}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" class="picture" />
</a>

いじょう！

この記事の固定リンク : http://mimizu.org/text/memo/item_289.html

COMMENT

コメント投稿フォームへ

たく 2008-09-25
なんか難しい事してるなぁ('∇')

さくら 2008-09-25
ぐーぐる先生はいつも味方です(*´・Θ・｀*)。

http://mimizu.org/text/member/sakura.html

飛蝗者 2008-09-28
お、サクもphpとsmartyでやってるのねぇー。
テンプレートエンジンって言っても開発側が楽になるだけで、デザイン屋さんはforeachやらで配列とかの概念覚えないといけないし…
個人的にsmartyとかみたいなテンプレートエンジンとかcakephpみたいなフレームワークより普通にphpでコーディングした方が絶対早い気がする。

さくら 2008-09-28
PHP は、Hallo World! を少しレベルアップさせたくらいよ(笑)。

自分でゼロから開発した事はないので、この手の既製アプリに限った話になるけど、全て PHP でやった場合、デザ面での修正や、コアのアップデート時なんかが、大変にならない？そう云う意味でも、コアとデザを分業化させた方が、結果的に早い、って事になると思うのぅ。

・・と書きつつも、恥ずかしながら、書いてあることがあまり理解できなかた・・。ｼｯﾄ！
ぐーぐるせんせえええええ！我にフォースのご加護をおお(´；Θ；｀)。

http://mimizu.org/text/member/sakura.html

飛蝗者 2008-10-01
うーん、この手のものは開発側は楽になるけどさ、「htmlとcssできます」ってだけの人assignやforeachって概念がないデザイン側にすっごい負担をかけていると思うよ。
結局ループする部分はforeachやらで、変数をtpl側に書かなくちゃいけなくて、それが分かる＝できる人はphpも分かるはずなのよね。
ピュアに開発する方はデザイン部分の時間を考えなくてよいけど、その分変数を考え作りこみを行って、フロントのデザイン考える人はどこの部分がAjax制御で、どの部分がSmartyかを考えてって…
デザイン側のスキルが高次元でプログラムが分かって、プログラマーはデザイナー側がどうしたら楽か？を考えられて初めて成り立つ理想な気がする。
（少なくとも全体のphpのコーディング作業は減ってもデザイン側に説明する手間がすんごい増えてる現場が大多数じゃないのかねぇ。）

さくら 2008-10-01
どういった状況を考えて云っているのかが、ごめんね、よくわからないんだけど
( 現場、ってあるから、お仕事としてやった場合、のことかな ) 、
ユーザーやクライアント、コーダーさんの存在も、たまには思い出してください(´；Θ；｀)。

http://mimizu.org/text/member/sakura.html