In this article I will explain with an example, how to zoom (enlarge) images on MouseOver in ASP.Net GridView using jQuery ElevateZoom Image Zoom plugin.
The images will be displayed in GridView and the jQuery ElevateZoom Image Zoom plugin will be applied to all the images present in the GridView control, which will then allow to zoom (enlarge) each image present in the GridView control.
jQuery ElevateZoom Image Zoom plugin
This article uses jQuery ElevateZoom Image Zoom plugin, you can find more details about the plugin on GitHub.
This plugin makes use of two sets of images.
1. The small Image or the original image displayed in the GridView control
2. The large image which is the larger version of the image which will be shown as zoomed or enlarged image on MouseOver.
The following screenshot displays how images are stored in two folders.
![Zoom (Enlarge) image on MouseOver in ASP.Net GridView using jQuery]()
Note: The names of both the images should be exactly same in order to make this concept work.
HTML Markup
The HTML consists an ASP.Net GridView with an HTML Image element in its ItemTemplate. The Image element has src and data-zoom-image attributes which will be set with the path of the small and large images respectively.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ShowHeader = "false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<img src='<%# ResolveUrl(Eval("ImageUrl").ToString()) %>' alt="" data-zoom-image='<%# ResolveUrl(Eval("ZoomImageUrl").ToString()) %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Namespaces
You will need to import the following namespaces.
C#
using System.IO;
using System.Data;
VB.Net
Imports System.IO
Imports System.Data
Displaying images from folder in ASP.Net GridView control
Inside the Page Load event of the ASP.Net Web Page, a loop is executed over the files that are fetched from the small images folder.
Inside the loop, the Image file name, the path of the small image and the path of the large image are inserted into the DataTable.
Finally the DataTable is bound to the GridView control.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("ImageName"),
new DataColumn("ImageUrl"),
new DataColumn("ZoomImageUrl")
});
string[] filePaths = Directory.GetFiles(Server.MapPath("~/Images/Small/"));
foreach (string filePath in filePaths)
{
string fileName = Path.GetFileName(filePath);
dt.Rows.Add(fileName, "~/Images/Small/" + fileName, "~/Images/Large/" + fileName);
}
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As New DataTable()
dt.Columns.AddRange(New DataColumn(2) {New DataColumn("ImageName"), New DataColumn("ImageUrl"), New DataColumn("ZoomImageUrl")})
Dim filePaths As String() = Directory.GetFiles(Server.MapPath("~/Images/Small/"))
For Each filePath As String In filePaths
Dim fileName As String = Path.GetFileName(filePath)
dt.Rows.Add(fileName, Convert.ToString("~/Images/Small/") & fileName, Convert.ToString("~/Images/Large/") & fileName)
Next
GridView1.DataSource = dt
GridView1.DataBind()
End If
End Sub
Applying the jQuery ElevateZoom Image Zoom plugin to GridView
The very first thing is to inherit the jQuery and the jQuery ElevateZoom Image Zoom plugin. Then inside the jQuery document ready event handler, the jQuery ElevateZoom Image Zoom plugin is applied to each Image element present in the ASP.Net GridView control.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.rawgit.com/elevateweb/elevatezoom/master/jquery.elevateZoom-3.0.8.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=GridView1] img").elevateZoom({
cursor: 'pointer',
imageCrossfade: true,
loadingIcon: 'loading.gif'
});
});
</script>
Screenshot
![Zoom (Enlarge) image on MouseOver in ASP.Net GridView using jQuery]()
Demo
Downloads
