ScrollView pagination example

by Derek Gathright

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/3.7.0pr3/build/cssreset/cssreset-min.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="http://yui.yahooapis.com/3.7.0pr3/build/scrollview-base/assets/skins/sam/scrollview-base.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="http://yui.yahooapis.com/3.7.0pr3/build/scrollview-scrollbars/assets/skins/sam/scrollview-scrollbars.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="http://yui.yahooapis.com/3.7.0pr1/build/scrollview-scrollbars/assets/skins/sam/scrollview-scrollbars-skin.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="http://yui.yahooapis.com/3.7.0pr3/build/scrollview-scrollbars/assets/scrollview-scrollbars-core.css" type="text/css" charset="utf-8">

<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
      
<div id="scrollview-container">
    <div id="scrollview-header">
        <h1>Paged ScrollView</h1>
    </div>

    <div id="scrollview-content" class="yui3-scrollview-loading">
        <ul>
            <li><img src="http://farm5.static.flickr.com/4136/4802088086_c621e0b501.jpg" alt="Above The City II"></li>
            <li><img src="http://farm5.static.flickr.com/4114/4801461321_1373a0ef89.jpg" alt="Walls and Canyon"></li>
            <li><img src="http://farm5.static.flickr.com/4100/4801614015_4303e8eaea.jpg" alt="Stairs Using In Situ Stone"></li>
            <li><img src="http://farm5.static.flickr.com/4076/4801368583_854e8c0ef3.jpg" alt="Tree Silhouette"></li>
        </ul>
    </div>

    <div id="scrollview-pager">
        <button id="scrollview-prev">Prev</button>
        <button id="scrollview-next">Next</button>
    </div>
</div>

<div id="additional-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquam hendrerit elit id vulputate. Pellentesque pellentesque erat rutrum velit facilisis sodales convallis tellus lacinia. Curabitur gravida mi sit amet nulla suscipit sed...

CSS

/* Identical to http://yuilibrary.com/yui/docs/assets/scrollview/horizontal.css */

html, body {
    margin:0;
    padding:0;
    font-family: arial,helvetica,clean,sans-serif;    
}

#additional-content {
    display:block;
    margin:10px;
}

#additional-content p {
    margin-bottom:5px;
}

/* === scrollview styles === */

#scrollview {
    border:1px solid #000;
    border-top:0;
}

#scrollview-content img {
    border-width:2px;
    border-style:solid;
    width: 300px;
    margin: 10px;
    -webkit-transform: translate3d(0, 0, 0); 
}

/* To layout horizontal LIs */
#scrollview-content {
    white-space:nowrap;
}

#scrollview-content li {
    display:inline-block;
    background-color:#fff;
}

/* For IE 6/7 - needs inline block hack */
#scrollview-content li {
    *display:inline;
    *zoom:1;
}

/* === scrollview container and header styles === */

#scrollview-container {
    float:left;
    margin:0 10px;
}

#scrollview-header {
    background-color:#6d83a1;
    border:1px solid #000;
    border-bottom:#2d3033;

    height:44px;
    *width:320px;

    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#d8dee6),
        color-stop(0.01, #b0bccc),
        color-stop(0.49, #889bb3),
        color-stop(0.50, #8094ae),
        to(#6d83a1)     
    );
    
}

#scrollview-header h1 {
    color: #fff;

    margin:0;
    padding:10px 0;

    text-align:center;

    font-size:150%;
    font-weight:bold;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.7);    
}

#scrollview-pager {
    padding:5px;
}

JavaScript

YUI({
    filter:'RAW',
    modules: {
        "scrollview-base": {
            "fullpath": "http://yui.yahooapis.com/3.7.0pr3/build/scrollview-base/scrollview-base.js"
        },
        "scrollview-paginator": {
            "fullpath": "http://yui.yahooapis.com/3.7.0pr3/build/scrollview-paginator/scrollview-paginator.js"
        },
        "scrollview-scrollbars": {
            "fullpath": "http://yui.yahooapis.com/3.7.0pr3/build/scrollview-scrollbars/scrollview-scrollbars.js"
        }
    }
}).use('scrollview', 'scrollview-paginator', function(Y) {
    var scrollView = new Y.ScrollView({
        id: "scrollview",
        srcNode : '#scrollview-content',
        width : 320,
        plugins: [{
            fn: Y.Plugin.ScrollViewPaginator,
            cfg: {
                selector: 'li'
            }
        }],
        render: true
    });
    
    // Prevent default image drag behavior
    scrollView.get("contentBox").delegate("mousedown", function(e) {
        e.preventDefault();
    }, "img");

    Y.one('#scrollview-next').on('click', Y.bind(scrollView.pages.next, scrollView.pages));
    Y.one('#scrollview-prev').on('click', Y.bind(scrollView.pages.prev, scrollView.pages));
});