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

Last Reply on Apr 02, 2015 07:18 AM By Mudassar

Posted on Apr 02, 2015 12:05 AM

I want to Zoom image inside DataList, but it is not working

<asp:DataList ID="DataList1" runat="server" height="380" width="280">
         <ItemTemplate>
          <div>            
           <asp:Image id="img1" ImageUrl='<%# Eval("Image") %>' data-zoom-image='<%# Eval("Image") %>'  runat="server"  height="380" width="280"/>
          </div>
         </ItemTemplate>
        </asp:DataList>
Posted on Apr 02, 2015 07:18 AM

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