Sunday, June 29, 2008

jQuery Carousel Example

A cool way to show a items gallery is using a scrollable div as Amazon displays related books for the current selected book. This technique is known as "carousel". I made an example (Download source (85Kb)) that shows a list of motherboards using a jQuery Carousel Component populated dinamically via Ajax queries (useful when haves a large items quantity to show)

Server side pagination method
The request/response to the method that returns a "page" of the carousel are maded using JSON.
For simplicity the pagination is done against a generic collection, but easily can be a database query.


[ScriptMethod(ResponseFormat = ResponseFormat.Json)]

public static List<Motherboard> GetItems(int pageIndex, int pageSize)


List<Motherboard> motherboards = new List<Motherboard>


new Motherboard("Asus P5Q Deluxe", "Asus P5Q Deluxe Motherboard", "Intel Socket T LGA775, P45 Express, ATX, 16GB DDR2, 1600MHz FSB"),

new Motherboard("GigaByte GA-P35-DS3L", "GigaByte GA-P35-DS3L Motherboard", "Intel Socket T LGA775, P35 Express, ATX, 8GB DDR, 1333MHz FSB "),

new Motherboard("Intel D5400XS", "Intel D5400XS Motherboard", "Intel Socket J LGA771, P35 Express, Extended ATX, 8GB DDR2, 1600MHz FSB "),

new Motherboard("Asus M3N-HT Deluxe Mempipe", "Asus M3N-HT Deluxe Mempipe Motherboard", "Socket AM2+, nVIDIA nForce 780a, ATX, 8GB DDR2, 2600MHz FSB"),

new Motherboard("ABIT IP35 PRO XE", "ABIT IP35 PRO XE Motherboard", "Intel Socket T LGA775, P35 Express, ATX, 8GB DDR2, 1600MHz FSB"),

new Motherboard("Asus Striker Extreme", "Asus Striker Extreme Motherboard", "Quad-Core/Core 2 Duo Extreme/Core 2 Duo/Pentium D/Celeron D, Socket T"),

new Motherboard("XFX MB-N780-ISH9", "XFX MB-N780-ISH9 Motherboard", "Intel Socket T LGA775, nForce 780i SLI, ATX, 8GB DDR2, 1333MHz FSB "),

new Motherboard("HP Asus P5BW-LA", "HP Asus P5BW-LA Motherboard", "Intel Socket T LGA775, P965 Express, Micro ATX, 8GB DDR2, 1066MHz FSB"),

new Motherboard("Biostar P4M900-M4", "Biostar P4M900-M4 Motherboard", "Core 2 Quad/Pentium D/Pentium 4/Celeron D, Socket T SLI, ATX, 8GB DDR2, 1333MHz Bus"),

new Motherboard("MSI P6N Diamond", "MSI P6N Diamond Motherboard", "Intel Socket T LGA775, nForce 680i SLI, ATX, 8GB DDR2, 1333MHz FS"),

new Motherboard("Intel D915GAG", "Intel D915GAG Motherboard", "Pentium 4/Celeron D, Socket T, 915G, mATX, 4GB DDR, 800MHz FSB"),

new Motherboard("ABIT IP35-E", "ABIT IP35-E Motherboard", "Intel Socket T LGA775, P35 Express, ATX, 8GB DDR2, 1333MHz FSB "),


return motherboards.GetRange((pageIndex - 1) * pageSize, pageSize);


Client side pagination method


function mycarousel_makeRequest(carousel, first, last, per_page, page)


// Lock carousel until request has been made


// Call the server side method with pageIndex and pageSize parameters


type: "POST",

url: "Default.aspx/GetItems",

data: "{'pageIndex':'" + page + "', 'pageSize':'" + per_page + "'}",

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function(data) {

mycarousel_itemAddCallback(carousel, first, last, data.d, page);




function mycarousel_itemAddCallback(carousel, first, last, data, page)


// Unlock


// Set size


var per_page = carousel.last - carousel.first + 1;

for (var i = first; i <= last; i++)


var pos = i - 1;

var idx = Math.round(((pos / per_page) - Math.floor(pos / per_page)) * per_page);

carousel.add(i, mycarousel_getItemHTML(data[idx]));




* Buil item html


function mycarousel_getItemHTML(mother)


var item = "<div>";

item += "<img src='images/" + mother.Image + ".jpg' alt='" + mother.Title + "'>";

item += "</div>";

item += "<div class='Title'>";

item += mother.Title;

item += "</div>";

item += "<div class='Description'>";

item += mother.Description;

item += "</div>";

return item;



Download source: jQuery Carousel in (85Kb)

1 comment:

adam said...

Good job,
could you please give and example reading from the database