how to zoom image on mouseover in datalist in asp.net

You will need to create a folder called Images in the Website Root and within it two Sub folders Small and Large. Both folders will contain small and large versions of the image.

Make sure the File names are same for both versions.

HTML

<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>
<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>

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);
        }
        DataList1.DataSource = dt;
        DataList1.DataBind();
    }
}

Screenshot