2012/08/30
画像やコンテンツを左右にスライド、スクロールするjQuery
画像ギャラリーや、商品を見せるのに、使えるjQueryプラグインを紹介します。
Smooth-Div-Scrollというプラグインです。
プラグインのダウンロードは以下から。
https://github.com/tkahn/Smooth-Div-Scroll
デモを作成したので、ご覧ください。
Smooth-Div-Scrollの使い方
まずはhead内に以下のソースを読み込みます。
|
1 2 3 4 5 | <script type="text/javascript" src="js/jquery.min.js"></script> <script type='text/javascript' src='js/jquery.mousewheel.min.js'></script> <script type='text/javascript' src='js/jquery-ui-1.8.18.custom.min.js'></script> <script type='text/javascript' src='js/jquery.smoothDivScroll-1.2-min.js'></script> <link type="text/css" href="css/smoothDivScroll.css" rel="stylesheet" media="all" /> |
こちらはすべて読み込まないと動きません。
（jquery.mousewheel.min.jsはなくても大丈夫かも・・・）
cssは自分で好きなように変更できるので、デザインに合わせて変更してください。
そして、以下のスクリプトを記述します。
こちらは、コンテンツの後に書かないとダメなようです。
</body>の直前に書くといいかと思います。
|
1 2 3 4 5 6 7 | <script type="text/javascript"> $("#sample").smoothDivScroll({ autoScrollingMode: "onstart" }); }); </script> |
htmlは、
|
1 2 3 4 5 6 | <div id="sliderContent"> <img src="images/sample01.jpg" /> <img src="images/sample02.jpg" /> <img src="images/sample03.jpg" /> <img src="images/sample04.jpg" /> </div> |
で完了です。
あとは、デフォルトでimagesも用意されています。
デモのソースを記述します。
javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | ; html-script: false ]<script type="text/javascript"> $("#sliderContent").smoothDivScroll({ autoScrollingMode: "always", autoScrollingDirection: "endlessloopright", autoScrollingStep: 1, autoScrollingInterval: 40, mousewheelScrolling: true, manualContinuousScrolling:true, visibleHotSpotBackgrounds: "onstart" }); //マウスオーバーでストップ、マウスアウトで再スタート $("#sliderContent").bind("mouseover", function() { $(this).smoothDivScroll("stopAutoScrolling"); }).bind("mouseout", function() { $(this).smoothDivScroll("startAutoScrolling"); }); </script> |
デフォルトの設定では、アニメーションは最初しかならず、一度マウスオンしてしまうと、 アニメーションは動きません。
ですので、上記のように記述をするとアニメーションがされるようになります。
オプションも豊富にあります。
http://www.smoothdivscroll.com/options.html
html
|
1 2 3 4 5 6 7 8 | <div id="sliderContent"> <a href=""><img src="images/item_img01.jpg" /></a> <a href=""><img src="images/item_img02.jpg" /></a> <a href=""><img src="images/item_img03.jpg" /></a> <a href=""><img src="images/item_img04.jpg" /></a> <a href=""><img src="images/item_img05.jpg" /></a> <a href=""><img src="images/item_img06.jpg" /></a> </div> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | #sliderContent { width: 961px; margin: 0 auto; position: relative; background-color: #ffffff; } .scrollableArea a { width: 200px; height: 200px; position: relative; margin-right: 5px; display: block; float: left; } .scrollableArea a span { display: block; text-align: center; } .scrollableArea a:hover { text-decoration: none; } |
あとは、直接cssファイルの中身をご覧ください。
/demo/abe/07/css/smoothDivScroll.css
ECサイトの商品を見せるのに、動きがあって良いかと思います。
これとlightboxなんかと合わせるとよりよくなるかと思います。
Author Profile
スターフィールド編集部
SHARE
