In following example images was retrive from folder but i want to retrive images from database and perform same all this following task..
So How can I do ?
https://www.aspsnippets.com/Articles/Zoom-Enlarge-image-on-MouseOver-in-ASPNet-DataList-using-jQuery.aspx
<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>
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();
}
}
<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>