Creating a simple photo gallery in asp.net by using Ajax HoverMenuExtender control with GridView.

In this tutorial i will show you how to create a simple image gallery with GridView control by using Ajax HoverMenuExtender.

1. Create a new website in VisualStudio.

2. Register AjaxControlToolkit in your page as follows.

     <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

3. If you are using an Ajax controls in your page you should use ToolkitScriptManager control in your page. 

4. Drag and drop ToolkitScriptManager on to your page.

    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

    </asp:ToolkitScriptManager>

5. Place GridView inside your page and then assign the following properties to GridView.

     AutoGenerateColumns="False"

     CellPadding="4"

     ForeColor="#333333"

     GridLines="None"

     BorderColor="#8A8A8A"

     BorderStyle="Solid"

     BorderWidth="2px"

     PageSize="4"

     AllowPaging="true"

     PagerSettings-Mode="NextPrevious"

     PagerSettings-NextPageText="Next"

     PagerSettings-PreviousPageText="Prev"

     HeaderStyle-BackColor="#696969"

     HeaderStyle-Font-Bold="True"

     HeaderStyle-ForeColor="White"

6. Add PageIndexChanging event to GridView for paging purpose.

    

    OnPageIndexChanging="GridView1_PageIndexChanging"

7. Add TemplateField to display the images in your grid and place an image control and set the ImageUrl to the binding expression as follows.

    <Columns>

            <asp:TemplateField HeaderText="Gallery">

                <ItemTemplate>

                    <asp:Image runat="server" ID="thumbnailImage" ImageUrl='<%# Container.DataItem %>'

                        Width="100" Height="100" />                

                </ItemTemplate>

            </asp:TemplateField>

    </Columns>

8. To show image preview when the user mouse over on to the image in gridview we will use HoverMenuExtender control.

HoverMenuExtender:

HoverMenu is an ASP.NET AJAX extender that can be attached to any ASP.NET WebControl,and will associate that control with a popup panel do display additional content. 

9. Drag and drop the HoverMenuExtender control inside ItemTemplate and set  the properties, and then add the Panel and place an Image control inside Panel to preview the gridview image and then set the ImageUrl to the binding expression as follows.

    <asp:HoverMenuExtender ID="HoverMenuExtender1" runat="server" PopupControlID="popupImage"

                        TargetControlID="thumbnailImage" OffsetX="10" OffsetY="5" PopupPosition="Right"

                        PopDelay="100" HoverDelay="100">

    </asp:HoverMenuExtender>

    <asp:Panel runat="server" ID="popupImage" BorderColor="#8A8A8A" BorderStyle="Solid"

                        BorderWidth="7px">

                        <asp:Image runat="server" ID="mainImage" ImageUrl='<%# Container.DataItem %>' Style="height: 400px;

                            width: auto;" />

    </asp:Panel>

10. Now add the images to your website create "Images" folder in your website root folder and place images  you want to display inside it.

11. Now go to code behind file add the following code to load the images into GridView.

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!Page.IsPostBack)

        {

            //Load images to the gridview

            LoadGallery();

        }

    }

    private void LoadGallery()

    {

        //Get application path of the website

        string appPath = HttpContext.Current.Request.ApplicationPath;

        //Get physical path of the website along woth images folder

        string physicalPath = HttpContext.Current.Request.MapPath(appPath) + "\\images";

        //get all files inside images folder

        string[] filePaths = Directory.GetFiles(physicalPath );

        //new array to store files names

        string[] finalFilePaths = new string[filePaths.Length];

        foreach (string str in filePaths)

        {

            //get relative path of the files and store in finalFilePath array

            finalFilePaths[Array.IndexOf(filePaths, str)] = str.Replace(physicalPath, "~/images");

        }

        //assign final paths to the gridview

        GridView1.DataSource = finalFilePaths;

        //Bind the gridview

        GridView1.DataBind();

    }

10. To work the paging in your GridView write the code inside  GridView1_PageIndexChanging event as follows.

    protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)

    {

        //assign new page index to gridview

        GridView1.PageIndex = e.NewPageIndex;

        //Rebind the GridView

        LoadGallery();

    }

11. Now build your website and open the page in your browser. GridView will load all the images from the "Images" folder and display's them. So, mouse over on to the images. Image preview will display besides to the image.

So, in this way we can create the simple photo gallery with the GridView.