ECCUBEにlightboxを実装する方法
備忘録
下記URL参照して実装可能でした。ありがとうです。
http://mimizu.org/text/memo/item_331.html
lightBox を EC CUBE に導入その2。今回は、JQuery 版に挑戦。
ｲﾝｽｺ状況は、さくらインターネットのスタンダードプラン、PHP 5.2.1、MySQL 5.1。
EC CUBE のバージョンは 2.4.1 で、ルートディレクトリに設置するカスタマイズ済み。
【 その1 】
jQuery lightBox plugin からスクリプトをダウンロードして解凍したら、
index.html と photos フォルダ以外のものを、新しく作成した「lightbox」フォルダにまとめておく。
【 その2 】
ひとまとめにした「lightbox」フォルダを、
./user_date ディレクトリへアップロードするのを前提に、ファイルを修正。
と云っても、修正ファイルは1つだけで、「閉じる」とか「次」「前」とかの画像パスの書き換えだけ。
lightbox/js/jquery.lightbox-0.5.js の、30〜34行目付近の画像パスを
imageLoading: 'images/lightbox-ico-loading.gif',
imageBtnPrev: 'images/lightbox-btn-prev.gif',
imageBtnNext: 'images/lightbox-btn-next.gif',
imageBtnClose: 'images/lightbox-btn-close.gif',
imageBlank: 'images/lightbox-blank.gif',
下記のように修正。「http://***.**.**」はショップ URL 。
imageLoading: 'http://***.**.**/user_data/lightbox/images/lightbox-ico-loading.gif',
imageBtnPrev: 'http://***.**.**/user_data/lightbox/images/lightbox-btn-prev.gif',
imageBtnNext: 'http://***.**.**/user_data/lightbox/images/lightbox-btn-next.gif',
imageBtnClose: 'http://***.**.**/user_data/lightbox/images/lightbox-btn-close.gif',
imageBlank: 'http://***.**.**/user_data/lightbox/images/lightbox-blank.gif',
【 その3 】
修正したら、「lightbox」フォルダごと、./user_data/ へアップロード。
user_data
├lightbox
├css
├ images
├ js
アップロードしたら、先ほど修正した画像パスにアクセスしてチェック。
パスが正しければ、きちんと画像が表示される筈なので、ここで Not found になったり、
画像がバッテンになってたりしたら、もう一度見直してみる。
( 因みに自分は、user_data → user_date のスペルミスに気づくまで、小一時間かかった。 )
きちんと画像が確認できたら、各テンプレートに lightBox を動かすための記述をしていく。
【 その4 】
まず、head 間に、スクリプトファイルと CSS ファイルの場所を記述。
head の記述があるファイルは、data/Smarty/templates/テンプレ名/site_frame.tpl 。
このファイルへ、配布サイトの How to use ページを参考に、下記を追加。
jQuery のスクリプトを他にも組み込む予定がある場合、一番上の jQuery のタグは、
のように Google AJAX Libraries API を利用するのも良いかもです。
【 その5 】
更に、もひとつ大事な設定。prototype.js 版と違い、jQuery 版では lightBox の実装方法が選択できます。
ここでは class 指定を使った実装方法にしてみた。下記も記述。
こう記述する事で、a タグに、class="lightbox" の指定があるときのみ lightBox 化する事ができる。
指定するクラス名を増やしたい場合は、$('a.任意のクラス名').lightBox(); を追加して対応。
【 その6 】
最後に、商品詳細ページのテンプレートを修正。 date/Smarty/templates/テンプレ名/detail.tpl 61行目付近、
ここが、拡大画像があるときのメイン画像表示部分なので、下記のように書き換え。
【 その5 】 で指定したクラス名を、間違えないように指定するように。
同ファイル、「★画像★」の下らへんにあるのは、「拡大する」の記述になっていて
ここで、「★画像★」と同じ class 名にしちゃうと、同じ画像がだぶって表示されちゃいますので注意。
【 その5 】 で、 $('a.kakudai').lightBox(); とか、別の class を追加して、
説明悪くて、解り難かったかもです、ごめんなさい。
この記事の固定リンク : http://mimizu.org/text/memo/item_331.html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
