In this article I will explain how to zoom (enlarge) images on MouseOver in ASP.Net DataList using jQuery ElevateZoom Image Zoom plugin.
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 DataList 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 DataList 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 DataList 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:DataList ID="DataList1" runat="server" RepeatColumns="2" CellPadding="4">
<ItemTemplate>
<table border="0" cellpadding="0" cellspacing="0" width="120px">
<tr>
<td align="center">
<img src='<%# ResolveUrl(Eval("ImageUrl").ToString()) %>' alt=""
data-zoom-image='<%# ResolveUrl(Eval("ZoomImageUrl").ToString()) %>' />
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
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 DataList control
Inside the Page Load event of the ASP.Net Web Page, a loop is executed over the files 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 DataList 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);
}
DataList1.DataSource = dt;
DataList1.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
DataList1.DataSource = dt
DataList1.DataBind()
End If
End Sub
Applying the jQuery ElevateZoom Image Zoom plugin to DataList
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 DataList 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*=DataList1] img").elevateZoom({
cursor: 'pointer',
imageCrossfade: true,
loadingIcon: 'loading.gif'
});
});
</script>
Screenshot
![Zoom (Enlarge) image on MouseOver in ASP.Net DataList using jQuery]()
Demo
Downloads
Download Code
