One of my previous articles I explained how to create an Image Gallery in ASP.Net using the ASP.Net GridView Control. But that article lacked Image Zooming feature hence I decided to write this article as an extension to that since it has Image Zooming feature.
I will not explain the data binding part and how images are stored and retrieved since all these terms have been covered which you can refer using the link below.
Display Images in GridView Control using the path stored in SQL Server database
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.
Adding DIVs
First you’ll need to add the two DIVs to your ASP.Net Web form
<div id="divBackground" class="modal">
</div>
<div id="divImage">
<table style="height: 100%; width: 100%">
<tr>
<td valign="middle" align="center">
<img id="imgLoader" runat="server" 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>
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. You will notice the image which I have added to provide a loading in progress until the image is completely loaded. The below image displays the loading of an image.
Click to enlarge image
Adding the CSS
You will need to add the following CSS in the head section of the page or in the CSS file
<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>
Adding the JavaScript
Next comes the related JavaScript function that will display the modal DIV when the Image in the ASP.Net GridView Control is clicked.
<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>
Above are the two functions that will take care of all the functions needed. The LoadDiv function as the name suggests loads the modal background DIV and the Image DIV with the enlarged image. This function gets called when the Image in the GridView is clicked.
An important line I need to point out is this
imgDiv.style.left = (width-650)/2 + "px";
As you will notice I have used a number 650 here. 650 is the width of the Image DIV in order to align it at the center of the screen I am subtracting it from the browser Viewport width and then taking the average.
The HideDiv function simply gets called when the Close Button is clicked on the Image DIV. It simply hides the DIV and unfreezes the screen.
Calling JavaScript from ASP.Net GridView Control
The only difference from my previous article is that I have used Image Control in Template Field instead of ImageField. Refer the GridView below
<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>
You will notice am calling the LoadDiv function in the OnClientClick event of ASP.Net ImageButton. It is important to return false from the JavaScript function to avoid postbacks. In the figure below you can view the enlarged image being displayed
Click to enlarge image
Try the demo
That’s it we come to an end. Hope you liked it. Download the related source code using the link below.
ImageGallery_ImageEnlarge.zip (756.96 kb)