画像ギャラリーや、商品を見せるのに、使えるjQueryプラグインを紹介します。

Smooth-Div-Scrollというプラグインです。

プラグインのダウンロードは以下から。

https://github.com/tkahn/Smooth-Div-Scroll

デモを作成したので、ご覧ください。

DEMO

Smooth-Div-Scrollの使い方

まずはhead内に以下のソースを読み込みます。

JavaScript

<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" />

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>の直前に書くといいかと思います。

 

JavaScript

<script type="text/javascript"> $("#sample").smoothDivScroll({ autoScrollingMode: "onstart" }); }); </script>

1 2 3 4 5 6 7

<script type="text/javascript"> $("#sample").smoothDivScroll({    autoScrollingMode: "onstart"   });    }); </script>

 

htmlは、

XHTML

<div id="sliderContent"> <img src="images/sample01.jpg" /> <img src="images/sample02.jpg" /> <img src="images/sample03.jpg" /> <img src="images/sample04.jpg" /> </div>

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

 

; html-script: false ]&lt;script type="text/javascript"&gt; $("#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"); }); &lt;/script&gt;

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

XHTML

<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>

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

CSS

#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; }

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なんかと合わせるとよりよくなるかと思います。