In this article I will explain how to create image / photo gallery in ASP.Net with image enlarge or zoom option using C# and VB.Net.
 
Binding the GridView
I have already explained the data binding part and how images are stored and retrieved and hence for populating the GridView please refer my article Display Images in GridView Control using the path stored in SQL Server database.
 
HTML Markup
This GridView is very similar to the one used in my article Display Images in GridView Control using the path stored in SQL Server database. The only difference is that here instead of ImageField column, I have made use of ImageButton in TemplateField column.
For the ImageButton OnClientClick event handler has been set which is discussed later.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Font-Names="Arial">
<Columns>
    <asp:BoundField DataField="ID" HeaderText="ID" />
    <asp:BoundField DataField="FileName" HeaderText="Image Name" />
    <asp:TemplateField HeaderText="Preview Image">
        <ItemTemplate>
            <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("FilePath")%>'
                Width="100px" Height="100px" Style="cursor: pointer" OnClientClick="return LoadDiv(this.src);" />
        </ItemTemplate>
    </asp:TemplateField>
</Columns>
</asp:GridView>
 
 
Concept
Here I’ll be adding Zoom functionality to all the images in the GridView so that user can click and view the enlarged image in a modal div or panel.
 
Add DIVs for building Modal Background and Modal Popup
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.
The First DIV divBackground will act as a modal DIV and will freeze the screen. The second DIV divImage will be used to display the enlarged image.
 I have added an Image to display loading progress until the image is completely loaded.
<div id="divBackground" class="modal">
</div>
<div id="divImage">
<table style="height: 100%; width: 100%">
    <tr>
        <td valign="middle" align="center">
            <img id="imgLoader" alt="" src="images/loader.gif" />
            <img id="imgFull" alt="" src="" style="display: none; height: 500px; width: 590px" />
        </td>
    </tr>
    <tr>
        <td align="center" valign="bottom">
            <input id="btnClose" type="button" value="close" onclick="HideDiv()" />
        </td>
    </tr>
</table>
</div>
 
 
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.
<style type="text/css">
body
{
    margin: 0;
    padding: 0;
    height: 100%;
}
.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: solid 1px black;
}
</style>
 
 
Client Side Scripting for showing image in Modal Popup with LightBox effect
The client side JavaScript consists of two functions LoadDiv and HideDiv.
The LoadDiv function is called when the ImageButton is clicked. It accepts the URL of the image as parameter and then loads the Image inside the Modal DIV.
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.
The HideDiv method gets called when the Close button inside the Modal Popup is clicked and it simply hides the Modal background DIV 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>
 
Image Gallery using ASP.Net GridView control | Display GridView images with LightBox effect whenever user clicks on images in ASP.Net
 
Demo
View Demo
 
 
Downloads
Download Code