Multi row jCarousel Lite using ajax datasource

Anup Das Gupta (asteranup)

0/5 (0 vote)

Nov 3, 2011

CPOL

10771

This morning I got a requirement to implement multi row jCarousel Lite with images. I decided to do it with some CSS ticks and jQuery.

Introduction

jCarousel Lite[^] is a very nice plugin. I have used it many times. I could not find any option[^] to specify the number of rows with which I want to display the images. So, I decided to do some CSS and jQuery manipulation to achieve this.

Using the Code

HTML

Let me first add the full source code and then explain. The code goes here:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Multiple rows with jcarousel.aspx.cs"
    Inherits="Multiple_rows_with_jcarousel" %>

It's very simple. Just adding a li if the index is divided by three. Otherwise, adding the image to the existing li.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
    <script src="http://www.webdesignbooth.com/demo/news-ticker/jcarousellite_1.0.1c4.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function() {
            var c = $("#container");
            var li;
            $(data[0]).each(function(index) {
                if (parseInt(index % 3) == 0) {
                    li = $("<li>");
                    c.append(li);
                }
                li.append($("<div class='thumbnail'><img src='" + this.ThumbNail + "'></div>"));
            });
            $(".newsticker").jCarouselLite({
                visible: 2,
                btnNext: ".next",
                btnPrev: ".prev"
            });
        });
    </script>
    <style>
        .newsticker
        {
            width: 330px;
        }
        .newsticker ul li
        {
            display: block;
            list-style: none outside none;
            margin-bottom: 5px;
            padding-bottom: 1px;
            background-color: #EAF4F5;
        }
        .newsticker .thumbnail
        {
            width: 130px;
            margin: 5px 5px 5px 5px;
        }
        .newsticker .info
        {
            margin-left: 10px;
            float: right;
            width: 190px;
        }
        .newsticker .info span.cat
        {
            color: #808080;
            display: block;
            font-size: 10px;
        }
        .newsticker .info a
        {
            color: #3c7acf;
            text-decoration: none;
        }
        .clear
        {
            clear: both;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="newsticker">
        <input value="Previous" class="prev" type="button" />
        <ul id="container">
        </ul>
        <input value="Next" class="next" type="button" />
    </div>
    </form>
</body>
</html>

Code Behind

public partial class Multiple_rows_with_jcarousel : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        var imageDataSource = (new[] { new {
                                    ThumbNail = "http://www.gallery2c.com/admin/Upload/ThumbNail/moda01.jpg" } }).ToList();
        for (int i = 2; i < 10; i++)
        {
            imageDataSource.Add(new
            {
                ThumbNail = "http://www.gallery2c.com/admin/Upload/ThumbNail/moda0" + i.ToString() + ".jpg"
            });
        }
        System.Web.Script.Serialization.JavaScriptSerializer toJSON = new System.Web.Script.Serialization.JavaScriptSerializer();
        string array = toJSON.Serialize(imageDataSource);
        ClientScript.RegisterArrayDeclaration("data", array);
    }
}

First of all, thanks to Gallery 2C[^] for providing me the images.

I have added some in memory data source as data provider. And then added the list of anonymous image object to a JavaScript array using JavaScriptSerializer and RegisterArrayDeclaration:

System.Web.Script.Serialization.JavaScriptSerializer toJSON = new System.Web.Script.Serialization.JavaScriptSerializer();
        string array = toJSON.Serialize(imageDataSource);
        ClientScript.RegisterArrayDeclaration("data", array);

Next, I wanted to show three images in one column with each image in one row. That is three row jCarousel Lite. Each item in the jCarousel Lite is nothing but a li tag. So, I decided to adjust the CSS to accommodate three images, one below the other and add the content to each li. That is done by the following code:

$(data[0]).each(function(index) {
    if (parseInt(index % 3) == 0) {
        li = $("<li>");
        c.append(li);
    }
    li.append($("<div class='thumbnail'><img src='" + this.ThumbNail + "'></div>"));
});