Multi row jCarousel Lite using ajax datasource

Anup Das Gupta (asteranup)

Rate me:

0.00/5 (No votes)

6 Nov 2011CPOL

10.6K

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:

XML

<%@ 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:

XML

$(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>"));
});

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Anup Das Gupta (asteranup)

Software Developer (Senior) Logica Pvt. Ltd.

India

Microsoft Community Contribution Award 2011 winner and Master Degree in Computer Science having more than 4 years of software development experience in different phases of a software development life cycle.

Having experience in technical leading of small team. Strong analytical and debugging skill.

A technical trainer in jQuery.

14000+ points (Star level) in the official Microsoft ASP.NET forum