画像などの要素を縦横にスクロール simplyscroll.js/jquery
以前の書いた記事
と似たような内容になりますが、ショップページに商品を陳列する際スペースがない場所でも自動でスクロールさせて動かすことで、多くの商品をお客さんの目に止めることが可能になります。
本日は、縦にも横にも画像などの要素をスクロールさせる方法を紹介したいと思います。
画像を縦横にスクロール「simplyscroll.js」
では、具体的にどんな表示イメージかというと
本日は無料化で何かと話題なYahoo!ショッピングから紹介したいと思います。
こちらのショップ 靴ショップやまう
ページ中ごろにある「瞬足」が並んでいる部分を見てもらうと画像がスクロールしています。
実装方法について
simplyscrollの公式サイトより、jquery.simplyscroll.zipをダウンロードしてください。
ダウンロードしたファイルの中から
「jquery.simplyscroll.js」
「jquery.simplyscroll.css」
「buttons.png」
の3つを使います。
また、http://jquery.com/よりjquery.min.jsもダウンロードしてください。
サンプルソース sample1.html
<link rel="stylesheet" href="jquery.simplyscroll.css" type="text/css"> <script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.simplyscroll.js" type="text/javascript"></script> <script type="text/javascript"> (function($) { $(function() { $("#slider").simplyScroll(); }); })(jQuery); </script> <ul id="slider"> <li> <img src="画像URL"> </li> <li> <img src="画像URL"> </li> <li> <img src="画像URL"> </li> <li> <img src="画像URL"> </li> <li> <img src="画像URL"> </li> </ul>
1、2、3行目 ダウンロードした3つのファイルを読み込みんでいます。
(サーバー内にアップするのを忘れないでください。サンプルソースは同一フォルダにファイルを配置した場合なのでパスも環境に合わせて変更してください)
4~10行目で スライダーの設定、実行をしている部分です。
ここで、動き、表示等の設定を行います。また、実行時には <ul id=”slider”>のidを指定しています。
htmlの記述部分も、非常にシンプルですね。
必要な数だけ<li><img src=””></li>を設定します。
もちろん、画像からのリンク設定も出来ます。
品名や価格などを表示したい場合も<li></li>内に記述可能です。
あとは jquery.simplyscroll.css 内で表示する画像に合わせて幅、高さを調整する必要があります。
【横スライドの場合】
140、141行目(width、height)、146、147行目(width、height)で全体の表示領域を調整します。
154、155行目(width、height)で1つの画像の表示領域を調整します。
【縦スライドの場合】
182、183行目(width、height)、188、189行目(width、height)で全体の表示領域を調整します。
195、196行目(width、height)で1つの画像の表示領域を調整します。
動作サンプル(デフォルト)
実行時のオプション等など指定しない場合
自動スクロールなし、スピード指定
実行の記述部分にオプションを指定します。
<script type="text/javascript"> (function($) { $(function() { $("#slider").simplyScroll({ auto: false, speed: 5 }); }); })(jQuery); </script>
縦にスライド
実行の記述部分にオプションを指定します。
<script type="text/javascript"> (function($) { $(function() { $("#slider").simplyScroll({ orientation: 'vertical', auto: true, manualMode: 'loop', frameRate: 10, speed: 5 }); }); })(jQuery); </script>
他にも マウスオーバー時にスクロール停止
pauseOnHover:true / false
自動スクロール停止ボタンを表示
pauseButton:false / true
スクロールする向きを指定
direction:’forwards’ / ‘backwards’
など実行時のオプションとして指定することが出来ます。
詳しくは、公式サイトにて確認ください。
ページにスペースがない時など商品情報を陳列すれば良いかもしれません。
ぜひ、活用してみてください。
画像スライダーに関する別記事
はじめまして。
アップありがとうございます。
「画像などの要素を縦にも横にも簡単スクロール」を自分のサイトで
試していたのですが、画像が縦に並んでしまいます。
スライドショーも始まりません。
解決策ありますでしょうか?