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

Last Reply on Jun 01, 2015 10:57 PM By Mudassar

Posted on Jun 01, 2015 10:47 PM

Hi sir ,

i am refering the link 

http://www.aspsnippets.com/Articles/Zoom-Enlarge-image-on-MouseOver-in-ASPNet-DataList-using-jQuery.aspx

can u help with repeater control for this.

Thanks

Posted on Jun 01, 2015 10:57 PM

This way

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        img
        {
            height: 160px;
            width: 160px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
            <table class="tblImages" 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:Repeater>
        <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 () {
                $(".tblImages img").elevateZoom({
                    cursor: 'pointer',
                    imageCrossfade: true,
                    loadingIcon: 'loading.gif'
                });
            });
        </script>
    </form>
</body>
</html>

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

Screenshot

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