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