This way
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
img
{
height: 160px;
width: 160px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<table class="tblImages" 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:Repeater>
<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 () {
$(".tblImages img").elevateZoom({
cursor: 'pointer',
imageCrossfade: true,
loadingIcon: 'loading.gif'
});
});
</script>
</form>
</body>
</html>
Namespaces
using System.IO;
using System.Data;
Code
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);
}
Repeater1.DataSource = dt;
Repeater1.DataBind();
}
}
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);
}
Repeater1.DataSource = dt;
Repeater1.DataBind();
}
}
Screenshot
