EC-CUBEにjQueryスライドバナー設置

アップル風スライドショー



今時のサイトではお約束のスライドするバナーをEC-CUBEに設置しました。


スライダー、スライドバナー、スライドショー、呼び方は色々とありますが、
この表現は昔からありました。以前はFlashでしたね。

jQueryが一気に主流になったのは色々事情もあるかと思いますが、
やはりiPhoneでも表示できる事が大きいのでしょうか。

今回はAppleの公式HP風なスライドショーを選択、設置しました。

動作デモはこちら

設置するには、以下の4点を動作させる事が必要です。

・script.jsを読み込ませる
・demo.cssを組み込むか読み込ませる
・画像ファイルを読みこませる
・呼び出したい場所にhtml記述を移す

もちろん、それぞれをリネームしても改変しても読み込ませれば動きます。

まずjsを読み込ませます。

EC-CUBEではsmartyを使用しているので、headタグのテンプレートは通常、

data/Smarty/templates/使用しているテンプレート名/site_frame.tpl

にあります。

ここでjsを読み込んでいる箇所がありますので、

<script type=”text/javascript” src=”<!–{$smarty.const.ROOT_URLPATH}–>js/slide.js”></script>

等と記載してやります。(script.jsをリネームしています)

ついでに、CSSも読み込むようにしておきます。

既存のCSSに追記しても良いですが、面倒だったので、今回は別途読み込ませました。

<link rel=”stylesheet” href=”<!–{$TPL_URLPATH}–>css/slide.css” type=”text/css” media=”all” />

細かい話をするとトップ以外でスライダーを使わないのであれば、速度や負荷を考えると、
トップだけ読み込むようにするべきだと思いますが、取り敢えず動かす事の解説なので端折ります。

<link rel=”stylesheet” href=”<!–{$TPL_URLPATH}–>css/slide.css” type=”text/css” media=”all” />

head内にこちらも追記しました。

smarty独自のタグで参照先を指定してあるので、上記例の場合は、
他のjsファイルやcssと同じ場所にファイルを設置します。

jsの置き場は、設置時に html/js だった場所、
cssの置き場は、設置時にhtml/user_data/packages/テンプレート名/css だった場所になるかと思います。

次にテンプレートを編集します。

サンプルコードでは、以下のように画像を参照していますが、

<div><img src=”img/sample_slides/macbook.jpg” width=”570″ height=”247″ alt=”side” /></div>

全ての参照先を以下のように差し替えてやることで、テンプレートを参照します。
こちらでは、テンプレート内のimgフォルダ内にslidesというスライダー用のフォルダを設置しました。

<div><img src=”<!–{$TPL_URLPATH}–>img/slides/sample_slides/macbook.jpg” width=”570″ height=”247″ alt=”side” /></div>

ここまで、動作確認してみると、レイアウトが崩れていました。
どうやら読み込ませた外部CSSのクラス名が被っている事が問題のようです。

そりゃmenuやulを直指定しているんだから色々不具合起きて当然ですね。

という事で、クラス名を変えて指定してやるか、細かくCSSを指定してやる必要があります。

今回は、構造上、対処が簡単だったので、demo.css内の指定を全て
ul → div#gallery ul のように変更する事で対処しました。

後は適当にデモソースに習ってサイズ等を調整して完成です。

時間で自動的にスライドするようにも出来ますので見栄えにも動きが出ますね。


その他の良質なスライダーはこちらのまとめ記事が参考になります。


コメントをする

メールアドレスが公開されることはありません。