Zoom image on MouseOver in ASP.Net DataList using jQuery

Last Reply 10 months ago By dharmendr

Posted 10 months ago

Hello All,

https://www.aspforums.net/Threads/208173/How-to-Zoom-image-on-MouseOver-like-Shopping-Websites-in-ASPNet/

I was implementing the above funcitonality but I see that when I hover on the image, only the large Image is shown. How can I zoom the image part as I hover my image on different places.

I tried the one mentioned below but even this just shows the big image on hover but no zoom functionality. I'm I missing something? Im pasting my code below.

Zoom (Enlarge) image on MouseOver in ASP.Net DataList using jQuery

<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*=imgProductSmall]").elevateZoom({
            cursor: 'pointer',
            imageCrossfade: true,
            loadingIcon: 'loading.gif'
        });
    });
</script>
 
<img runat="server" id="imgProductSmall" data-zoom-image='<%# ResolveUrl(Eval("ZoomImageUrl").ToString()) %>' />
string ProductCode = Request.QueryString["id"].ToString();
lblProductId.Text = ProductCode;
imgProductSmall.Src=ResolveUrl("images/product-images/medium/" + ProductCode  + ".jpg");

The issue is I'm not sure how to pass data-zoom-image =''parameter from code behind. Can you please guide me.

Thanks.

Posted 10 months ago Modified on 10 months ago

Hi nadeem1218,

Check this example. Now please take its reference and correct your code.

I have created the example using the below article.

Zoom (Enlarge) image on MouseOver in ASP.Net DataList using jQuery

Here i have not assign the data-zoom-image attribute to the image tag. I have assigned the attrubute from code behind. So refer the code and modify as per your requirement.

HTML

<asp:DataList ID="DataList1" runat="server" RepeatColumns="2" CellPadding="4" OnItemDataBound="OnItemDataBound">
    <ItemTemplate>
        <table border="0" cellpadding="0" cellspacing="0" width="120px">
            <tr>
                <td align="center">
                    <img runat="server" id="imgProductSmall" src='<%# ResolveUrl(Eval("ImageUrl").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>
<style type="text/css">
    body
    {
        font-family: Arial;
        font-size: 10pt;
    }
    img
    {
        height: 160px;
        width: 160px;
    }
</style>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.AddRange(new System.Data.DataColumn[] { new System.Data.DataColumn("ImageName"), new System.Data.DataColumn("ImageUrl") });
        string[] filePaths = System.IO.Directory.GetFiles(Server.MapPath("~/Images/Small/"));
        foreach (string filePath in filePaths)
        {
            string fileName = System.IO.Path.GetFileName(filePath);
            dt.Rows.Add(fileName, "~/Images/Small/" + fileName);
        }
        DataList1.DataSource = dt;
        DataList1.DataBind();
    }
}

protected void OnItemDataBound(object sender, DataListItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        string[] filePaths = System.IO.Directory.GetFiles(Server.MapPath("~/Images/Small/"));
        System.Web.UI.HtmlControls.HtmlImage image = e.Item.FindControl("imgProductSmall") as System.Web.UI.HtmlControls.HtmlImage;
        image.Attributes.Add("data-zoom-image", ResolveUrl("~/Images/Large/") + System.IO.Path.GetFileName(filePaths[e.Item.ItemIndex]));
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As System.Data.DataTable = New System.Data.DataTable()
        dt.Columns.AddRange(New System.Data.DataColumn() {New System.Data.DataColumn("ImageName"), New System.Data.DataColumn("ImageUrl")})
        Dim filePaths As String() = System.IO.Directory.GetFiles(Server.MapPath("~/Images/Small/"))
        For Each filePath As String In filePaths
            Dim fileName As String = System.IO.Path.GetFileName(filePath)
            dt.Rows.Add(fileName, "~/Images/Small/" & fileName)
        Next

        DataList1.DataSource = dt
        DataList1.DataBind()
    End If
End Sub

Protected Sub OnItemDataBound(ByVal sender As Object, ByVal e As DataListItemEventArgs)
    If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
        Dim filePaths As String() = System.IO.Directory.GetFiles(Server.MapPath("~/Images/Small/"))
        Dim image As System.Web.UI.HtmlControls.HtmlImage = TryCast(e.Item.FindControl("imgProductSmall"), System.Web.UI.HtmlControls.HtmlImage)
        image.Attributes.Add("data-zoom-image", ResolveUrl("~/Images/Large/") + System.IO.Path.GetFileName(filePaths(e.Item.ItemIndex)))
    End If
End Sub

Screenshot