Simple jQuery Carousel Matrix 2D AJAX

• Download source code - 372 KB

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:

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.