KendoUI ScrollView demo

KendoUI ScrollView demo with multiple items per page

by OnaBai

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.flat.min.css">
<script src="http://cdn.kendostatic.com/2014.1.318/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<script src="http://demos.telerik.com/kendo-ui/content/spa/aeroviewr/js/500px.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.mobile.min.css">
<div id="example">
    <div class="demo-section k-header">
        <div id="scrollview"></div>
        <a id="prev-img" title="Previous Image"></a>
        <a id="next-img" title="Next Image"></a>
    </div>
</div>

<script id="template" type="text/x-kendo-template">
    <table>
        <tr>
            # for (var i = 0; i < data.length; i++) { #
            <td>
                <img src="#: data[i].image_url #"/>
            </td>
            # } #
        </tr>
    </table>
</script>

CSS

.demo-section {
    width: 580px;
    position: relative;
}
#prev-img,
#next-img {
    display: block;
    position: absolute;
    top: 10px;
    z-idex: 1;
    height: 120px;
    width: 50px;
    opacity: 0.2;
}
#prev-img {
    left: 10px;
    background: url('http://demos.telerik.com/kendo-ui/content/web/scrollview/arrow-left.png') no-repeat 50% 50%;
}
#next-img {
    left: auto;
    right: 10px;
    background: url('http://demos.telerik.com/kendo-ui/content/web/scrollview/arrow-right.png') no-repeat 50% 50%;
}
a#prev-img:hover {
    background: url('http://demos.telerik.com/kendo-ui/content/web/scrollview/arrow-left.png') no-repeat 50% 50% rgba(0,0,0,.3);
    opacity: 1;
}
a#next-img:hover  {
    background: url('http://demos.telerik.com/kendo-ui/content/web/scrollview/arrow-right.png') no-repeat 50% 50% rgba(0,0,0,.3);
    opacity: 1;
}

JavaScript

_500px.init({
    sdk_key: 'a3be03a8a98d6e05af17f60d2cf4bf696eb47555'
});

var _500pxDS = new kendo.data.DataSource({
    transport: {
        read: function(options) {
            var params = {
                feature: "popular",
                image_size: 6,
                page: options.data.page,
                rpp: options.data.pageSize
            };
            
            _500px.api("/photos", params, function(response) {
                options.success(response.data);
            });
        }
    },
    serverPaging: true,
    pageSize: 30,
    schema: {
        data: "photos",
        total: "total_items"
    }
});

$("#scrollview").kendoMobileScrollView({
    dataSource: _500pxDS,
    contentHeight: 150,
    itemsPerPage: 4,
    enablePager: false,
    template: kendo.template($("#template").html())
});

$("#prev-img").click(function(e) {
    $("#scrollview").data("kendoMobileScrollView").prev();
});

$("#next-img").click(function(e) {
    $("#scrollview").data("kendoMobileScrollView").next();
});