aelassas.free.fr

• Download the source code (for Visual Studio 2010) – 10 Mb

Recently I was checking out some nice jQuery image sliders and come across a fancy thumbnail hover effect. I decided to use this effect and set up an ASP .NET image slider with jQuery and CSS.

I updated the article on codeproject.

Models

Architecture

In order to focus on the fancy thumbnail hover effect, I decided to make the application as simple as possible. I have used an XML document that contains the images paths and the Repeater control with paging.

XML

The XML structure is defined as bellow.

<images>
  <image imageUri="/Images/DSC_0349_k.JPG" thumbnailUri="/Images/DSC_0349_k_thumb.JPG" />
  <image imageUri="/Images/DSC_0359_nb.JPG" thumbnailUri="/Images/DSC_0359_nb_thumb.JPG" />
</images>

Every image has a preview file whose location is set in the imageUri attribute and a thumbnail file whose location is set in the thumbnailUri attribute. You will notice that all the images are stored in the folder Images in the root of the Web site.

Loading the images

I decided to use the Repeater ASP .NET control because it responds to my need. This control is a data-bound list that allows custom layout by repeating a specified template for each item displayed in the list.

<asp:Repeater ID="RepeaterImages" runat="server" EnableViewState="false">
    <HeaderTemplate>
        <ul class="thumb">
    </HeaderTemplate>
    <ItemTemplate>
        <li><a href='<%#DataBinder.Eval(Container.DataItem, "imageUri")%>'>
            <img src='<%#DataBinder.Eval(Container.DataItem, "thumbnailUri")%>' alt="" />
        </a></li>
    </ItemTemplate>
    <FooterTemplate>
        </ul>
    </FooterTemplate>
</asp:Repeater>

In the layout, I used an unordered list ul. Each item of the list contains the thumbnail and a link to its preview.

The binding is done by the method LoadImages.

private void LoadImages()
{
    // Populate the repeater control with the images DataSet
    // Indicate that the data should be paged
    // Set the number of images you wish to display per page
    // Set the PagedDataSource's current page
    var pds = new PagedDataSource
                    {
                        DataSource = ImagesDataView,
                        AllowPaging = true,
                        PageSize = 9,
                        CurrentPageIndex = CurrentPage - 1
                    };

    LabelCurrentPage.Text = "Page " + CurrentPage + " of " + pds.PageCount;

    // Disable Previous or Next buttons if necessary
    ImageButtonPrevious.Visible = !pds.IsFirstPage;
    ImageButtonNext.Visible = !pds.IsLastPage;

    // DataBind
    RepeaterImages.DataSource = pds;
    RepeaterImages.DataBind();
}

The current page number is persisted in the viewstate.

public int CurrentPage
{
    get
    {
        // Look for current page in ViewState
        object o = ViewState["CurrentPage"];
        if (o == null) return 1; // default page index of 1
        return (int) o;
    }

    set { ViewState["CurrentPage"] = value; }
}

The DataView is persisted in the cache to boost paging performance.

// Use ASP .NET Cache to boost paging performance
public DataView ImagesDataView
{
    get
    {
        if (Cache["ImagesDataView"] == null)
        {
            // Read images info from XML document into a DataSet
            var d = new DataSet();
            d.ReadXml(MapPath("/App_Data/Images.xml"));
            Cache["ImagesDataView"] = d.Tables[0].DefaultView;
        }
        return (DataView)Cache["ImagesDataView"];
    }
}

The paging is done through two buttons and a label that contains the current page number.

<div id="pager">
    <asp:Label ID="LabelCurrentPage" runat="server" EnableViewState="false"></asp:Label>
    <asp:ImageButton ID="ImageButtonPrevious" runat="server" ImageUrl="Styles/Images/Arrow-Left-icon.png"
        OnClick="ImageButtonPrevious_Click" CssClass="previous" EnableViewState="false" />
    <asp:ImageButton ID="ImageButtonNext" runat="server" ImageUrl="Styles/Images/Arrow-right-icon.png"
        OnClick="ImageButtonNext_Click" CssClass="next" EnableViewState="false" />
</div>

If the page is being rendered for the first time or isn’t being loaded in response to a postback, we load the images.

protected void Page_Load(object sender, EventArgs e)
{
    // Reload control if the page is being rendered for the first time
    // or isn't being loaded in response to a postback
    if (!IsPostBack)
    {
        LoadImages();
    }
}

When the user clicks on the next button, the current page number is updated and the images are loaded.

protected void ImageButtonNext_Click(object sender, EventArgs e)
{
    // Set viewstate variable to the next page
    CurrentPage++;

    // Reload control
    LoadImages();
}

When the user clicks on the previous button, the current page number is updated and the images are loaded.

protected void ImageButtonPrevious_Click(object sender, EventArgs e)
{
    // Set viewstate variable to the previous page
    CurrentPage--;

    // Reload control
    LoadImages();
}

The icon buttons that I used are free and from Icon Archive.

The images that I used are free and from morgueFile.

You will notice that I disabled the session state because I don’t need it and for performance reasons If you don’t need it is recommended to disable it.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQuery.ImageSlider.Default" EnableSessionState="false" %>

You will also notice that I disabled the view state for all the controls on the page because I don’t need it. I only need the viewstate for persisting the current page number.

For the explanation of the fancy hover effect, I invite you to read Soh Tanaka’s blog.

License

This article, along with any associated source code and files, is licensed under The Apache License, Version 2.0.

More information

This article is published on CODE PROJECT and MSDN Code Gallery.