Introduction

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.

Background

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.

Models

jQuery.ImageSlider1.PNG

jQuery.ImageSlider3.PNG

jQuery.ImageSlider4.PNG

Using the code

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.

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.

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.

You can also store the images in a database and retreive them through a businnes layer where you can perform image processing. Then you can use a PagedDataSource for paging, a listView that contains the images and an HttpHandler to display the images in the web page. I invite you to take a look at this article If you want to use a database.

You can also find this article on my blog. 

Tag asp,net,image,slider,with,fancy,thumbnail,hover,effect
推荐.NET配套的通用数据层ORM框架：CYQ.Data 通用数据层框架