Zoom image on MouseOver in ASP.Net DataList using jQuery

Last Reply 2 months ago By dharmendr

Posted 2 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 2 months ago Modified on 2 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

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html