Click here to Skip to main content
Click here to Skip to main content

Simple jQuery Carousel Matrix 2D AJAX

By , 28 Feb 2013
Rate this:
Please Sign up or sign in to vote.

Introduction

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.

Background

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:

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
    $.ajax({
        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;
            else
                $('#olddiv').html(result).show();
        }
    })

    $('#prev').hide();
    $('#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
    $('#next').unbind('click');
    $('#prev').unbind('click');
    $('#prev').show();

    if (action == 'prev' && currentPageIndex == 0) {
        hidePreview = true;
    }
    
    //Get the next or previous page
    $.ajax({
        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;
            else
                $('#newdiv').html(result);
        }
    })

    //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)
        $('#next').hide();
    else {
        $('#next').click(function () { curIndex = parseInt(currentPageIndex) + 1; 
           $('#hPageIndex').val(curIndex); paginate('next'); });
    }

    if (hidePreview)
        $('#prev').hide();
    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.

License

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
I am a Fan of dotnet technologies. I began to work with Java j2ee technologies and today i made my choice : .Net Framework is very pleasant , has excellents article codes and documentation.
I found very useful articles in codeproject , and today i want to give my contribution , and i hope that my articles will be useful.
 
Go to see my blog : http://davidzenou.blogspot.com/2009/01/david.html

Comments and Discussions

 
QuestionCarousel PingroupWisen Technologies3-Aug-13 3:23 

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

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

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