Scrollable with jQuery

• Dec282008
• Vote:
  http://bizcaz.com/archives/2008/12/28-221036.php
• Categories: jQuery
• Tags: jQuery
• Social Bookmark

• Prev Page: ScrollTo with jQuery
• Next Page: iframe with jQuery

こんばんわ^^

今年もあと僅かですね。
今年はいろいろプログラミングについていい経験させてもらいました。 Movable Type は少し飽きてきたこともあってあまりカスタマイズ記事って書いてない気もしますが、最後の締めくくりとして年内に 1 回くらいは Movable Type に関する記事を書いておこうかなと思う今日この頃です。てか、それ以前に Movable Type ってずっと話題がないんだよねぇ (;￣∇￣A

さて、jQuery の記事は今年が最後になるかな。
マウスホィールでもスクロール可能な、ギャラリー的なイメージ表示に良さそうプラグインを使ってみました。

• Scroll your HTML with jquery scrollable
• /trunk/plugins/mousewheel - jQuery - Development

Scrollable プラグインと MouseWheel プラグインを連携させて表示させてます。
MouseWheel プラグインは他でも使えそうなかんじです。

使い方

このプラグインが提供する、スクロール機能、マウスホィール機能自体は難なく実装できます。 でも、CSS による依存が大きいこともあって実際にサイト内で使おうとするとちょと手間がかかるかもしれません。
それを見越しても魅力的スクロール機能なので是非がんばって欲しいのココロ。

基本的には以下のようなマークアップになります。

まず青字のように大枠なブロックとして囲います。
赤字はページナビゲーションになります。不要であれば削除可能です。
緑字は NEXT / PREVIOUSE ボタンになります。不要であれば削除可能です。
そして、黄色字がスクロール対象のアイテム( イメージ群 )になります。

大まかにはこんなかんじになります。
そして上記マークアップに対する Scrollable プラグインのコードは以下の通りになります。

赤字のセレクタには、上記マークアップでいうところの、青字を指定します。
各パラメータの説明を以下に記します。

• size

  表示するアイテムの個数を指定します。以下の図の赤枠で示すように、常に見えるアイテムの個数を指定します。

  

  デフォルトは 5 アイテムになります。

• speed

  スクロール・スピードをミリ秒で指定します。デフォルトは 300 ミリ秒です。

• prev

  PREV ボタンのセレクタ名称を指定します。デフォルトは上記マークアップの緑字のように、 prev クラスとなります。

• next

  NEXT ボタンのセレクタ名称を指定します。デフォルトは上記マークアップの緑字のように、 next クラスとなります。

• navi

  ページナビゲーションセレクタ名称を指定します。デフォルトは上記マークアップの赤字のように、 navi クラスとなります。

• naviItem

  ページナビゲーションの各ページをマークアップする際のタグを指定します。デフォルトは span タグで括られます。
  実際にページナビゲーションは以下のようにマークアップされるようです。

  ページナビゲーション・マークアップ

  1. <div class="navi">
  2.     <span page="0" class="active"></span>
  3.     <span page="1" ></span>
  4.     <span page="2" ></span>
  5.     <span page="3" ></span>
  6. </div>

  青字はカレントページを示すクラスになります。CSS で div.navi span.active のようにスタイルすることができます。

• activeClass

  ページナビゲーションのカレントページに付加されるクラス名を指定します。 上記 naviItem で触れてますが、このオプションで指定したクラス名称がカレントページとして付加されます。

• items

  スクロールさせたいアイテムのセレクタ名を指定します。上記例のマークアップでいうところの、黄色字のクラス名を指定します。 デフォルトは items クラスになります。

• loop

  アイテムをループして表示できるようにするか否かを指定します。

  • true: ループします。
  • falase: ループしません。デフォルトです。

• clickable

  各アイテムをクリック可能とするか否かを指定します。

  • true: クリック可能とします。デフォルトです。
  • falase: クリック不可とします。

• onSeek

  スクロールされた後に何らかの処理を実行させたい場合に任意のファンクションを指定することができます。

注意すること

1. ページナビゲーションのマークアップについて

   ページナビゲーションのマークアップで <div class="navi">●●●</div> のように●●●を入れてしまうと正しくページナビゲーションが表示されませんでした。 どうやらここには何も挟んではダメなようです。

2. ページナビゲーションのイメージは縦ロールオーバーより横ロールオーバーの方がいいかも

   ページナビゲーションには dots.png というイメージファイルが使われてます。 このイメージファイルは、カレントページ用、ホバー時用のイメージをロールオーバーで使えるようになってます。
   デフォルトの CSS では縦ロールオーバーとなってますが、これだと IE では上手く表示できませんでした。
   なので、上記サンプルでは横ロールオーバーに変更することで IE でも表示できるよう変更してます。

3. デフォルトの CSS では IE においてレイアウトが崩れる

   機能としては満たしてるのですがデザイン上頂けないです（つω-`｡）
   また、先ほども言ったように CSS による依存が大きいので CSS で各自のサイトに合わせてデザインする必要があるみたい。
   なので、上記サンプルで使ってる CSS 内に少しコメント入れてますので参考にしてください。

   スタイルシート

   1. div.scrollable {
   2.     position: relative;
   3.     background-color:#222;
   4.     border:1px solid #666;
   5.     padding:10px;
   6.     -moz-border-radius:5px;
   7.     margin-top:30px;
   8. }
   9.  
   10. div.horizontal {
   11.     width: 436px;/*436px = [div.items] width(384) + [div.items] margin(8) + [div.items a] margin(8) + [a.prev & next] width(18) x 2*/
   12.     height: 68px;
   13. }
   14.  
   15. div.vertical {
   16.     padding: 10px 0;
   17.     width:108px !important;/*104px = [div.items a] width(88) + [div.items] margin(8) + [div.items a] margin(8)*/
   18.     height:218px;/*218px = ([div.items a] height(66) + [div.vertical a] margin(10)) x 3 - 10px*/
   19.     float:left;
   20. }
   21.  
   22. /* container for the scrollable items */
   23. div.horizontal div.items {
   24.     height:66px;
   25.     margin-left:8px;/*makes it to the same value as [div.items a] right-margin*/
   26.     float:left;
   27.     width: 384px !important;/*384px = ([div.items a] width(88) + [div.items a] margin(8)) x 4*/
   28. }
   29.  
   30. div.vertical div.items {
   31.     width:88px;
   32.     height:218px !important;/*makes it to the same value as [div.vertical] height*/
   33. }
   34.  
   35. /* single item */
   36. div.items a {
   37.     display:block;
   38.     width:88px;
   39.     height:66px;
   40.     background:url(img/entry.gif) 0 0 no-repeat;
   41.     font-size:50px;
   42.     color:#ccc;
   43.     line-height:66px;
   44.     text-decoration:none;
   45.     text-align:center;
   46.     cursor:pointer;
   47.     font-family:verdana;
   48. }
   49.  
   50. div.items a {
   51.     float:left;
   52.     margin-right:8px;
   53. }
   54.  
   55. div.items a.active {
   56.     background-position:-176px 0;/*176px = [div.items a] width x 2*/
   57.     color:#555;
   58.     cursor:default;
   59. }
   60.  
   61. div.vertical a {
   62.     margin-bottom:10px;
   63. }
   64.  
   65. div.vertical div.items a {
   66.     float:none;
   67. }
   68.  
   69. /* next / prev buttons */
   70. a.prev, a.next {
   71.     background:url(img/left_black.png) no-repeat 0 0;
   72.     display:block;
   73.     width:18px;
   74.     height:18px;
   75.     float:left;
   76.     margin:22px 0 0 0;
   77.     cursor:pointer;
   78. }
   79.  
   80. a.next {
   81.     background-image:url(img/right_black.png)
   82. }
   83.  
   84. a.prev:hover {
   85.     background-position:0 -18px;
   86. }
   87.  
   88. a.next:hover {
   89.     background-position:0 -18px;
   90. }
   91.  
   92. /* navigator */
   93. div.navi {
   94.     position:relative;
   95.     top:-30px;
   96.     left:248px;/*suitably adjusts it*/
   97.     margin-left:-60px;
   98.     width:60px;
   99.     height:0;
   100. }
   101.  
   102. div.vertical div.navi {
   103.     left:75px;
   104.     width:80px;
   105. }
   106.  
   107. * html div.navi {/*for IE*/
   108. }
   109.  
   110. /* items inside navigator */
   111. div.navi span {
   112.     width:8px;
   113.     height:8px;
   114.     float:left;
   115.     margin:3px;
   116.     background:url(img/dots_black.png) 0 0 no-repeat;
   117.     cursor:pointer;
   118. }
   119.  
   120. div.navi span:hover {
   121.     background-position:-8px 0;/*horizontal rolling over*/
   122. }
   123.  
   124. div.navi span.active {
   125.     background-position:-16px 0;/*horizontal rolling over*/
   126. }

以上です。
余談ですが以下のようなプラグインもあります。

• Playlist - Flowplayer JavaScript plugin

• Related Entries
• 09/12/06ブラウザスクロールに連動するサイドバー
• 09/11/29かんたんスターレーティング( jquery.sexyvote.js )
• 09/11/27TopUp
• 09/05/18リファラ・ランキング・プラグイン（jquery.pagerank.js）
• 09/03/16すべてのブログのアクセスランキングを表示する（jquery.pagerank.js）
• 09/03/15ローテーションするアクセスランキング（jquery.pagerank.js）
• 09/01/24Updated Today with jQuery
• 09/01/20LazyDocWrite with jQuery
• 09/01/17jQuery 1.3.0 リリース
• 09/01/03Sparklines with jQuery

• Edit
• Permalink
• No Comments
• No TrackBacks