通販サイトにショップサーブを使っていらっしゃるお客様のサイトに、スライドショーを設置。
bxslider , unslider, nivo slider などを試す。
いずれも、jqueryが必要。
ショップサーブのディレクトリがいまひとつ把握できないため、自社で借りてるレンタルサーバのスペースへ
jquery及び各javascript , cssファイルを設置。
＊ショップサーブの保存領域へ置くのをやめた理由は、こちらの記事を参考にして。
考え方としては、ショップサーブの管理画面で【センター用フリーエリア】の一つを
スライドショーにしてしまおうというもの。
作業の大まかな流れは、
・ショップサーブ管理画面の【ヘッダのバナーエリア】へ、jquery-1.8.3.js , スライダー用のjsとスライダー用のcssの参照先を記入
・ショップサーブ管理画面の【画像台帳】に使用する画像を登録
・ショップサーブ管理画面の【センター用フリーエリア】へ、例えばbxsliderの場合だと、
1 2 3 4 | <ul class="bxslider"> <li><img src="画像台帳のパス/pic1.jpg" /></li> <li><img src="</code><code data-language="html">画像台帳のパス</code><code data-language="html">/pic2.jpg" /></li> </code> <li><img src="<code data-language="html">画像台帳のパス</code>/pic3.jpg" /></li></ul> |
とリストアイテムを指定。その上で、.bxslider()関数を呼び出す。
ただし、bxsliderの場合、ショップサーブのcssに起因する現象か、このままでは画像の表示位置がやや右寄りになるので回避策の検討が必要。
お客様サイトでは、他のプラグインとタグの追加で回避している。