｢EC-CUBE｣の商品ページで、画像の拡大機能が標準で搭載されているのですが、旧来のリンクをクリックすると、仕込まれたJavaScriptが、指定された大きさで別のウィンドウを開いて拡大写真を表示する方法を使っています。個人的に、この別ウィンドウを開いて拡大写真を見せる方法っていうのは、個人的にスマートな方法じゃないなと思ってまして、できれば、Ajaxモジュールの｢Lightbox｣を使って、同一ウインドウで拡大写真を表示できないものかと思い設置に挑戦してみました。

まずは、この｢Naga Blog｣でも採用している、｢prototype.js｣と｢script.aculo.us｣を使った｢Lightbox 2｣の設置をしてみました。これの設置は何度も行っているので慣れてますから、短時間の設置作業で済んだのですが、いざ動かしてみようとしたら、まるで動きません。調べてみると、｢EC-CUBE｣のシステムが、別のAjaxライブラリ｢jQuery｣を使っていて、それが、｢prototype.js｣と｢script.aculo.us｣のどちらかと干渉しているようでした。｢jQuery｣を排除すると、｢EC-CUBE｣自体が動かなくなる可能性が高いので、｢Lightbox 2｣の設置は諦めることにしました。

かわりに、｢Lightbox 2｣とほぼ同じ動きををする｢jQuery｣のAjaxモジュール｢jQuery lightBox plugin｣の設置に、改めて挑戦することにしましたヨ。

と、いうわけで、覚え書きも兼ねて、手順を書いときます。

まず、注意書き。今回カスタマイズを施した環境は、EC-CUBE 2.3.4・CERVSERVER・MySQL 5.1.22-rc・PHP 5.2.5です。今後の開発で、使えなくなる場合もあります。

モノがなければどうにもならないので、｢jQuery lightBox plugin｣のサイトから、｢jQuery lightBox plugin｣をダウンロードします。この記事を書いている時のバージョンは0.5です。

ダウンロードされたZIPファイルを解凍すると、｢jquery-lightbox-0.5｣というフォルダができます。この中に、｢css｣｢images｣｢js｣｢photos｣4つのフォルダができます。この中で｢jQuery lightBox plugin｣を動かすのに必要なファイルが入っているのは、｢css｣｢images｣｢js｣になります。｢css｣｢images｣はコードを改変の前準備をする必要がないので、このままアップロードしちゃいます。

まず、｢images｣ディレクトリですが、｢EC-CUBE｣を設置するショップのトップページと同階層あたりに置きます。

• html/images

次に、｢css｣フォルダの中にある｢jquery.lightbox-0.5.css｣をアップロードします。これは、ちょっと変わった所に設置します。なんでかというと、リンクタグの部分に、｢EC-CUBE｣のタグを書いて、テンプレートとして使う為です。場所は、テンプレートファイルが格納されている下記になります。

• shop/user_data/packages/default(別のテンプレートセットを設定している場合はそちら)/css/jquery.lightbox-0.5.css

今度は、｢js｣フォルダの中にある｢jquery.lightbox-0.5.js｣ファイルをエディタソフト等で開いて、30〜34行目のリンクを、先ほどアップロードしたimages｣ディレクトリの位置に合わせてURLを書き換えます。｢jquery.lightbox-0.5.js｣ファイルをアップロードする場所は、下記のように階層が深かったりするので、手っ取り早い方法としては、httpから書いちゃうのが楽で良いかもです。ファイルを変更し終わったら、下記の場所にアップロードします。残った｢jquery.js｣｢jquery.lightbox-0.5.min.js｣と｢jquery.lightbox-0.5.pack.js｣のうち、｢jquery.js｣は、｢EC-CUBE｣が使っているものを使う為、アップロードはしません。｢jquery.lightbox-0.5.min.js｣と｢jquery.lightbox-0.5.pack.js｣は、今回使用しませんので、こちらもアップロードはしません。

• html/user_data/packages/default(別のテンプレートセットを設定している場合はそちら)/js/jquery.lightbox-0.5.j

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

• data/Smarty/templates/default(別のテンプレートセットを設定している場合はそちら)/site_frame.tpl

｢common.css｣と書かれた次の行あたりに｢query.lightbox-0.5.css｣へのリンクを追加します。このモジュールは、PCでしか表示できませんから、｢media="screen"｣としてもOKです。

<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" />

さらに、その下にある4つのJavaScriptファイルをリンクしている部分に、｢jquery.js｣と｢jquery.lightbox-0.5.js｣へのリンクを追加します。

<script type="text/javascript" src="<!--{$TPL_DIR}-->js/css.js"></script>
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/navi.js"></script>
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/win_op.js"></script>
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/site.js"></script>
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.js"></script>
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.lightbox-0.5.js"></script>

次に、｢jQuery lightBox plugin｣を動作させる為のJavaScriptを書き入れます。の直前ぐらいで良いかと思いますヨ。下記のリストの様に、4パターンほどの指定の仕方があるのですが、今回、自分は、上から3番目パターンを使っています。class名も｢roduct-main-photo｣｢product-sub-photo｣と2つ設定しました。

<script type="text/javascript">
$(function() {
// Use this example, or...
$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
// This, or...
$('#gallery a').lightBox(); // Select all links in object with gallery ID
// This, or...
$('a.lightbox').lightBox(); // Select all links with lightbox class
// This, or...
$('a').lightBox(); // Select all links in the page
// ... The possibility are many. Use your creative or choose one in the examples above
});
</script>

<script type="text/javascript">
$(function() {
$('a.product-main-photo').lightBox();
$('a.product-sub-photo').lightBox();
});
</script>

拡大する写真に｢jQuery lightBox plugin｣を使って、拡大表示をする設定をする訳ですが、拡大表示が必要な写真は、商品ページ内の2箇所だけです。まず、下記の場所にある｢detail.tpl｣を、エディタ等で開きます。

• html/user_data/packages/default(別のテンプレートセットを設定している場合はそちら)/detail.tpl

商品ページの詳細メイン画像と、詳細サブ画像のタグが書かれている箇所を探し出し、それぞれを下記のリストのように変更すれば、各画像の拡大表示は、｢jQuery lightBox plugin｣に置き換えられます。

詳細メイン画像

<!--{assign var=key value="main_image"}-->
<!--{if $arrProduct.main_large_image != ""}-->
<a href="<!--{$arrFile.main_large_image.filepath}-->" class="product-main-photo">
<img src="<!--{$arrFile[$key].filepath}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" />
</a>
<!--{else}-->
<img src="<!--{$arrFile[$key].filepath}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" />
<!--{/if}-->

詳細サブ画像

<!--{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}-->

｢detail.tpl｣を該当する場所にアップロードして、Webブラウザーで、商品ページにアクセスして写真が拡大表示されたら完成です。