EC-CUBEに実装されているColorboxをカスタマイズする方法を紹介します。
ColorboxはjQueryプラグインで画像をクリックすると拡大画像が表示されるもの。EC-CUBEのデフォルトでは単純に拡大画像の表示のみですが、Colorboxでは他にも様々なスタイルが用意されています。
このページでは、Colorboxに用意された様々なスタイルをEC-CUBEに実装してみる方法を紹介します。
EC-CUBE2.13のColorboxをカスタマイズしてみる
現在、最新版ではEC-CUBE3が公開されていますが、ここでは安定板の2.13を使ってColorboxを追加してみます。
Colorboxのリソースまとめ
Colorboxのカスタマイズについては、開発者さんのページが参考になります。ビギナーズガイドでコードの書き方のチェックや、デモページで実際の動作を確認できるので参考にしてみて下さい。
また、デモページはダウンロードファイル内にもあるのでここからチェックすることもできます。
EC-CUBEのColorboxバージョンをチェック
EC-CUBE2.13で使用されているColorboxのバージョンはv1.4.27となっています。最新版はVersion 1.6.3(2015/07/27)。基本的にはデフォルトのバージョンで問題ないと思うのですが、バグ修正されている最新版を使いたい場合は以下のリンクからダウンロード可能です。
Colorbox Githubページ
Colorboxのファイルは、html->js->jquery.colorboxフォルダにあるのでダウンンロードしたjsファイルはここにいれればOK。
デフォルトのColorboxの設定を確認する
EC-CUBEのColorboxはeccube.jsで設定されています。場所は、html->jsフォルダ。このファイルの一番下を見ると以下のようにすごくシンプルに設定されているのが分かります。
// モーダルウィンドウ
if ($('a.expansion').length) {
$('a.expansion').colorbox();
}設定はこのファイルに書いてもいいんですが、どうしてもファイルをいじりたくない場合はテンプレートのpackage内にjsファイルを作ってください。
この場合、テンプレートファイルのheadタグ内に追加したjsファイルを読み込む必要があるのでご注意を。また、class名が被ると正しく動作しない可能性があるので、デフォルトのclass名（.expansion）以外を使うことをおすすめします。テンプレート側もclass名変えておきましょう。
Colorboxの設定を変えてみる
ダウンロードファイルのexample1~5のindex.htmlをブラウザで開くとデモページを見ることができます。表示方法はElastic、Fade、Slideshowなど様々なスタイルが用意されてます。
headタグ内のjavascriptを見れば分かるように、コードは非常にシンプル。トランジションをフェードに変えたいなら、eccube.jsの設定を以下のように変更するだけでOKです。
// モーダルウィンドウ
if ($('a.expansion').length) {
$('a.expansion').colorbox({rel:'group2', transition:"fade"});
}上記のようにcolorbox()の部分をデモページのコードに置き換えるだけで変更可能。見た目を変えたい場合は、exampleフォルダの、colorbox.cssをEC-CUBE側のものと置き換えるだけです。
CSSファイルを置き換えるとこんな感じで簡単にスタイルを変更できるのが便利ですね。ただし、ファイル置き換えだけだと正しく表示できない場合があるので、そこは各自でスタイルを修正してください。
今回はEC-CUBEのColorboxをカスタマイズしてみました。こちらのショップではEC-CUBE向けのテンプレートを販売中です。
TetraThemes
価格もお手頃なので是非チェックしてみてくださいね！
