Click here to Skip to main content
13,512,240 members
Click here to Skip to main content
Add your own
alternative version


11 bookmarked
Posted 3 Sep 2012

Simple jQuery Carousel Matrix 2D AJAX

, 28 Feb 2013
Rate this:
Please Sign up or sign in to vote.
Simple and easy to use jQuery matrix 2D.


In my opinion jQuery is the most powerful and the best JavaScript framework today. The developer community is becoming important and the open source libraries are growing up. Sometimes you can find interesting jQuery controls with a complex implementation not easy to understand and to maintain, and it can be problematic. Today I propose you a very simple control to use: my 2D jQuery carousel that allows you to display images with links in a matrix that allows you to navigate through them without postbacks, dynamically loading the image matrices.


The idea is simple: the image matrix is generated through an HTML table. This table is contained in a div control and the div control can move to the left or to the right. When this div control has moved to the bottom of the screen, a new div appears in the screen with a new matrix of images. Watch this illustration:


Using the code

The code is not too hard to understand.

During the loading of this page, an asynchronous call is done to a WCF service (method ProduceHTML of Service1.svc). You pass three important parameters: the current page index, the number of items by page, the number of items by line, and an optional parameter that allows you to know which action you do (not exploited in this implementation).

$(document).ready(function () {
    var hidePreview = true;
    var hideNext = false;

    //First Display
        type: 'GET',
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        url: 'Service1.svc/ProduceHTML',
        data: { PageIndex: '1', NbItemByPage: '18', NbItemByLine: '6', Action: 'no' },
        success: function (html) {
            var result = html.d;
            if (result == '')
                hideNext = true;

    $('#next').click(function () { $('#hPageIndex').val('2'); paginate('next'); });

The response of the WCF webservice is assigned to the old div content. And the next button click event handler is linked with the method paginate:

function paginate(action) {

    var currentPageIndex = $('#hPageIndex').val();
    var hidePreview = false;
    var hideNext = false;

    //Desactivation eventhandler pagination

    if (action == 'prev' && currentPageIndex == 0) {
        hidePreview = true;
    //Get the next or previous page
        type: 'GET',
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        url: 'Service1.svc/ProduceHTML',
        data: { PageIndex: currentPageIndex, NbItemByPage: '18', 
                NbItemByLine: '6', Action: action },
        success: function (html) {
            //Write the content of the new page into div id 'newdiv'
            var result = html.d;
            if (result == '')
                hideNext = true;

    //Slide the div id 'olddiv' and replace by the div id 'newdiv' 
    move('#newdiv', '#olddiv', 10, 1000, action);

    var curIndex;
    //Reactivate pagination handler
    if (hideNext)
    else {
        $('#next').click(function () { curIndex = parseInt(currentPageIndex) + 1; 
           $('#hPageIndex').val(curIndex); paginate('next'); });

    if (hidePreview)
    else {
        $('#prev').click(function () { curIndex = parseInt(currentPageIndex) - 1; 
           $('#hPageIndex').val(curIndex); paginate('prev'); });

The paginate method triggers the same asynchronous method with different parameters to get the new HTML content, the jQuery "move" method animates the newdiv and olddiv content.

Now, just a rapid watch on the WCF service:

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service1 
	//this attribute allows to get the response with json format
    [WebGet(ResponseFormat = WebMessageFormat.Json)]
    public string ProduceHTML(int PageIndex,
                         int NbItemByPage ,
                         int  NbItemByLine, 
                         string Action )
        List<ImageLinkData> filteredList = null;
        string html = string.Empty;
        int IndexEnd = 0;
        int IndexBegin = 0;

        if (PageIndex == 1)
            filteredList = DataRepository.listImageLinkData.Take(NbItemByPage).ToList < ImageLinkData>();
            //build image without zoom (false parameter)
            html = HtmlBuilder.BuildHtml(filteredList, NbItemByLine , false);
            return html;
        IndexEnd = (NbItemByPage * PageIndex) - 1;
        IndexBegin = IndexEnd - (NbItemByPage - 1);
		//take good rows
        filteredList = DataRepository.listImageLinkData.Skip(IndexBegin).Take(IndexBegin).ToList<ImageLinkData>();
        //build image with zoom (true parameter)
        html = HtmlBuilder.BuildHtml(filteredList, NbItemByLine,true);
        return html;

When the service method is called, I simulate the retrieved data through the DataRepository class and the HtmlBuilder class builds HTML with data provided by the DataRepository class.

Points of Interest

This control allows us to see the power of jQuery coupled with the power of ASP.NET because simpler concepts can be developed easily and fast.


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


About the Author

David Zenou
Software Developer Several
France France
Fan of .NET Technologies
Go to see my blog :

You may also be interested in...

Comments and Discussions

QuestionCarousel Pin
Wisen Technologies3-Aug-13 3:23
groupWisen Technologies3-Aug-13 3:23 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.180417.1 | Last Updated 28 Feb 2013
Article Copyright 2012 by David Zenou
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid