In this article I will explain with an example, how to build Image Gallery GridView in ASP.Net using C# and VB.Net.
This article will also cover how to implement LightBox effect whenever user clicks on images.
Thus building an Image Gallery using GridView with image enlarge feature whenever user clicks on the image.
 
 

HTML Markup

The following HTML Markup consists:
GridView – For displaying images.
GridView consists of two BoundField columns and a TemplateField column.
The TemplateField column consists of an ItemTemplate with ImageButton control.
ImageButton – For displaying enlarged image.
ImageButton has been assigned with an OnClientClick event handler to call the LoadDiv JavaScript function.
<asp:GridView ID="gvFiles" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="FileId" HeaderText="ID" />
        <asp:BoundField DataField="Name" HeaderText="Image Name" />
        <asp:TemplateField HeaderText="Preview Image">
            <ItemTemplate>
                <asp:ImageButton ID="imgButton" runat="server" ImageUrl='<%# Eval("Path")%>' Width="100px"
                    Height="100px" Style="cursor: pointer" OnClientClick="return LoadDiv(this.src);" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
 
Below the GridView control you need to add two HTML DIVs, one will be used for displaying modal background while other to display the Image in a Modal Popup.

HTML DIV for background

This DIV (divBackground) will act as a modal DIV and will freeze the screen.
 

HTML DIV for Loader

This DIV (divImage) will be used to display the enlarged image.
It consists of two HTML Image elements one for displaying Loader the and other one for display the enlarged image preview.
It also consists of an HTML INPUT button for closing the image preview which has been assigned with an onclick event handler.
<div id="divBackground" class="modal"></div>
<div id="divImage" class="info">
    <table style="height: 100%; width: 100%">
        <tr>
            <td valign="middle" align="center">
                <img id="imgLoader" alt=""
                    src="Images/loader.gif" />
                <img id="imgFull" runat="server" alt="" src=""
                    style="display: none; height: 250px; width: 290px" />
            </td>
        </tr>
        <tr>
            <td align="center" valign="bottom">
                <input id="btnClose" type="button" value="close"
                    onclick="HideDiv()" />
            </td>
        </tr>
    </table>
</div>
 
 

Client Side Scripting for showing image in Modal Popup with LightBox effect

The client side JavaScript consists of two JavaScript functions LoadDiv and HideDiv.

LoadDiv

The LoadDiv function is called when the ImageButton is clicked. It accepts the URL of the image as parameter and background DIV and image elements are referenced.
The loader image is displayed and inside the img.onload event handler, the enlarged image is displayed and loader image is set hidden.
Finally, it displays the Modal background DIV which freezes the page and displays the Modal Popup with the enlarged image and thus creating the LightBox effect.
 

HideDiv

The HideDiv method gets called when the Close button inside the Modal Popup is clicked.
It simply hides the Modal background DIV, enlarged image and the Modal Popup.
<script type="text/javascript">
    function LoadDiv(url) {
        var img = new Image();
        var bcgDiv = document.getElementById("divBackground");
        var imgDiv = document.getElementById("divImage");
        var imgFull = document.getElementById("imgFull");
        var imgLoader = document.getElementById("imgLoader");
 
        imgLoader.style.display = "block";
        img.onload = function () {
            imgFull.src = img.src;
            imgFull.style.display = "block";
            imgLoader.style.display = "none";
        };
        img.src = url;
        var width = document.body.clientWidth;
        if (document.body.clientHeight > document.body.scrollHeight) {
            bcgDiv.style.height = document.body.clientHeight + "px";
        }
        else {
            bcgDiv.style.height = document.body.scrollHeight + "px";
        }
 
        imgDiv.style.left = (width - 650) / 2 + "px";
        imgDiv.style.top = "20px";
        bcgDiv.style.width = "100%";
 
        bcgDiv.style.display = "block";
        imgDiv.style.display = "block";
        return false;
    }
    function HideDiv() {
        var bcgDiv = document.getElementById("divBackground");
        var imgDiv = document.getElementById("divImage");
        var imgFull = document.getElementById("imgFull");
        if (bcgDiv != null) {
            bcgDiv.style.display = "none";
            imgDiv.style.display = "none";
            imgFull.style.display = "none";
        }
    }
</script>
 
 

Namespaces

You will need to import the following namespaces.
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
 
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
 
 

Binding GridView

Inside the Page Load event handler, the GridView is populated with the records fetched from the SQL Server database.
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        string query = "SELECT FileId, Name, Path FROM Files";
        string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
 
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter(query, con))
            {
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    gvFiles.DataSource = dt;
                    gvFiles.DataBind();
                }
            }
        }
    }
}
 
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim query As String = "SELECT FileId, Name, Path FROM Files"
        Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Using con As SqlConnection = New SqlConnection(constr)
            Using sda As SqlDataAdapter = New SqlDataAdapter(query, con)
                Using dt As DataTable = New DataTable()
                    sda.Fill(dt)
                    gvFiles.DataSource = dt
                    gvFiles.DataBind()
                End Using
            End Using
        End Using
    End If
End Sub
 
 

CSS for Modal DIV and Modal Popup

You will need to add the following CSS in the head section of the page or in the CSS file. These CSS classes will be used to style Modal Background and Modal Popups.
Here, Zoom functionality is added to all the images in the GridView so that user can click and view the enlarged image in a modal div or panel.
style type="text/css">
    body { height: 100%; overflow-y: auto; font-family: Arial; font-size: 10pt; }
    .modal { display: none; position: absolute; top: 0px; left: 0px; background-color: black; z-index: 100; opacity: 0.8; filter: alpha(opacity=60); -moz-opacity: 0.8; min-height: 100%; }
    #divImage { display: none; z-index: 1000; position: fixed; top: 0; left: 0; background-color: White; height: 550px; width: 600px; padding: 3px; border: solid1pxblack; }
</style>
 
 

Screenshot

Image Gallery using ASP.Net GridView control
 
 

Demo

View Demo
 
 

Downloads

Download Code