複数画像をスクロールさせるjQueryプラグイン「Smooth Div Scroll」

Read More

アイコンやサムネイルをずらっと並べて表示させておいて、
それをゆっくりとスクロールすることができるというjQueryのプラグイン。


デモはこちら↓
http://xirasaya.com/demo/4/
# FF、GC、IE6、IE7、IE8で動作を確認。

デモの画像は以下から借りました。
http://htd.seesaa.net/category/3157698-1.html



以下は公式サイト。
■Smooth Div Scroll
http://www.smoothdivscroll.com/


ダウンロードはトップページにあるリンクをクリック。



zipファイルのリンクをクリックするとDLが始まる。



DLしたファイルを解凍するといくつかのフォルダとファイルが確認できる。



スクロールの動作に必要なファイルは以下の通り。
smoothDivScroll.css
jquery.smoothDivScroll-1.2.js
jquery.mousewheel.min.js
jquery-ui-1.8.18.custom.min.js
jquery.js


最後のjqueryファイルはzipファイルには同梱されていないので別途用意する必要ある。


DLしたサンプルのindex.htmlのソースコードを見ると、jquery.jsの読み込み部は以下のようになっている。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>


そう、googleライブラリAPIからjQueryを読み込むようになっている。

だったらjQuery UIもgoogleライブラリAPIから読み込めばいいのだが、なぜかそちらはそうなっていない。
不思議…


ちなみにサンプルではjQueryのVerは1.7.1となっていたが1.3でもあっても1.6であっても動作することを確認した。



今回自分はオートスクロールを実装したかったのでコントローラの表示をしない。

コントローラとはこの部分。



なのでコントローラの画像は必要ない。
よってDLしたimagesのcursorsフォルダの中身を必要としない。


念の為CSSファイル内で画像を読み込んでいる部分を全てコメントアウトして保存し直した。

# background-imageとかcursor属性の部分全てコメントアウト



ファイルのソースコード(一部省略)。
<head>
<title>Demo4</title>
<link rel="Stylesheet" type="text/css" href="css/smoothdivscroll/smoothDivScroll.css" />
<style type="text/css">
<!--
#makeMeScrollable {
  width:50%;
  /* margin:auto;*/
  position: relative;
}

#makeMeScrollable div.scrollableArea img {
  position: relative;
  float: left;
  margin: 0;
  padding: 10px;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
//-->
</style>
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="js/smoothdivscroll/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<script src="js/smoothdivscroll/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="js/smoothdivscroll/jquery.smoothDivScroll-1.2.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
  $("#makeMeScrollable").smoothDivScroll({ 
    mousewheelScrolling: false,
    manualContinuousScrolling: false,
    visibleHotSpotBackgrounds: "always",
    autoScrollingMode: "always",
    autoScrollingStep: 1,
    autoScrollingInterval: 15
  });
});
//-->
</script>
</head>
<body>
  <div id="makeMeScrollable">
    <img src="image/ico_010.png" alt="" />
    <img src="image/ico_020.png" alt="" />
    <img src="image/ico_030.png" alt="" />
    <img src="image/ico_040.png" alt="" />
    <img src="image/ico_050.png" alt="" />
    <img src="image/ico_060.png" alt="" />
    <img src="image/ico_070.png" alt="" />
    <img src="image/ico_080.png" alt="" />
    <img src="image/ico_090.png" alt="" />
    <img src="image/ico_100.png" alt="" />
  </div>
</body>



Optionを変更することによってコントローラをなくしたり、速度を変えたりすることができる。
Optionの詳細は公式サイトで確認されたし。



以下は実装時に気がついた注意点。

・image要素のwidthを書き換えてしまと一部のブラウザでスクロール速度に差異が出る。
imageは拡大/縮小せずにそのまま使う方がよさげ。


・SmoothDivScrollのVerによって設定できるOptionの名前が若干違う。
# 現時点(2012/07/20)でのVerは1.2

他サイトで紹介しているOptionがそのまま使えないことがあるのでこの辺りも公式サイトの最新情報を参考にすべし。


・ファイル名の一部が小文字になってたり大文字になってたりしている。
具体的にはjsファイルの
jquery.smoothDivScroll-1.2.js

jquery.smoothdivscroll-1.2-min.js

わざとそうしているのかどうかは知らないが注意が必要。