WEBサービス創造記

WEBサービスを作ったり保守したりしてる人のメモブログです。

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

      2012/12/18

jquery.scrollable.js とは

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

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

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

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

 - jQuery , ,