コンテンツのスクロールをスタイリッシュに行えるjquery.scrollable.js

jquery.scrollable.js とは

jquery.scrollable.jsは、さまざまなコンテンツを特定の領域で水平方向にスクロール可能なウィジェットにできるプラグインです。
つまり、下図の様なものを簡単に作れるというものです。

jquery.scrollable.js のダウンロードと使い方

以下、jquery.scrollable.js のダウンロードから実際の使い方までの簡単な説明です。

MOUSE WHEEL EXTENSIONからmousewheel.jsをダウンロード。これはマウスホイールでもスライドさせるためのプラグインです。
http://flowplayer.org/tools/archive/scrollable-0.13.html#download
このURLに jquery.scrollable.js があったのですがリンク切れになっています。
なので、応急措置的に以下のURLのものを保存してお使いください。
http://linuxserver.jp/js/jquery.scrollable.min.js※サーバ移転時にリンク切れになったようです。見つかったら再アップします。
スクリプトがダウンロードできたら、下記のテストスクリプトで動作確認を行います。

test4scrollable.html

<html>
<head>
<script type="text/javascript" src="./js/jquery.js"></script>
<script src="./js/jquery.scrollable.min.js"></script>
<script src="./js/jquery.mousewheel.js"></script>
<script>
    $(function() {
        $("#scrollable")
        .scrollable({horizontal:true});

    });
</script>
<title>test4scrollable</title>

<style type="text/css">
<!--
#container {
    width: 850px;
    margin: 0px auto;
    text-align: center;
    border : 1px solid #c0c0c0;
}

/* outmost wrapper element */
#scrollable {
    position:relative;
    width : 800px;
    height : 140px;
    margin: 30px 25px 25px 25px;
    background : #efefef;
    border : 1px solid #ddd;
}

/* アイテム部分 */
div.items {
    margin : 10px 35px;
    width : 730px !important;
    height : 140px;
    /*border : 1px solid #000;*/
}

/* single item */
div.items a {
    float:left;
    width:120px;
    height:120px;
    margin : 0px 8px;
    cursor:pointer;
    /*border : 1px solid #000;*/
}


/* 進む・戻るボタン */
a.prev, a.next {
    position:absolute;
    top:51px;
    background:url(./images/arrow/left.png) no-repeat 0 0;
    display:block;
    width:18px;
    height:18px;
    float:left;
    cursor:pointer;
}
a.prev{
    left : 6px;
}
a.next{
    right: 5px;
}
a.next {
    background-image:url(./images/arrow/right.png);
}

a.prev:hover {
    background-position:0 -18px;
}

a.next:hover {
    background-position:0 -18px;
}

/* ナビ部分 */
div.navi {
    position:absolute;
    top:-15px;
    left:380px;
    width:50px;
    height:0px;
}


/* items inside navigator */
div.navi span {
    overflow:hidden;
    width:8px;
    height:8px;
    float:left;
    margin:3px;
    background:url(./images/dots.png) 0 0 no-repeat;
    cursor:pointer;
}

div.navi span:hover {
    background-position:0 -8px;
}

div.navi span.active {
    background-position:0 -16px;
}

-->
</style>
</head>
<body>

<div id="container">
<div id="scrollable">
    <div class="navi"></div>
    <a class="prev"></a>
        <div class="items">
            <a>1</a>  <a>2</a>  <a>3</a>  <a>4</a>  <a>5</a>
            <a>6</a>  <a>7</a>  <a>8</a>  <a>9</a>  <a>10</a>
            <a>11</a> <a>12</a> <a>13</a> <a>14</a> <a>15</a>
        </div>
    <a class="next"></a>
</div>
</div><!-- End Of #container -->

</body>
</html>

あくまで動作確認のために簡単に作成したものですので、細かい点は省いています。
画像は下記URLのものをそのまま利用していますので、実際にスクリプトを動かすときは適宜保存してパスを変更してください。
http://www.flowplayer.org/img/playlist/arrow/left.png
http://www.flowplayer.org/img/playlist/arrow/right.png
http://www.flowplayer.org/img/playlist/dots.png

より完成度の高いサンプルとしては下記URLのものがありますのでそちらが参考になるかもしれません。
http://www.css-lecture.com/template/2008/1014/
http://flowplayer.org/tools/demos/scrollable/index.htm

最終更新 2010-04-07

参考資料

画像をスクロールさせる jquery.scrollable.js | CSS Lecture

この記事へのコメント

jquery.scrollable.jsに関してですが、
jquery.scrollable.js のダウンロードと使い方で、
'2'のリンクされているURL↓
http://linuxserver.jp/js/jquery.scrollable.min.js
からもDLできないようです。

投稿者 : | 投稿日時 :

>>1さん

ご返事遅くなりまして申し訳ないです。

今確認したらたしかにリンク切れでした。
サーバ移転時に切れたのかな〜近いうちにこのブログをWordPressに移行する予定なのでそのときに再アップしておきます。

投稿者 : 管理者 | 投稿日時 :