Zoom image on mouse over in GridView in ASP.Net using jQuery

Last Reply on May 20, 2013 07:50 AM By Mudassar

Posted on May 20, 2013 01:19 AM

Hello friends,

 

I want to zoom the picture in another division. for example i have a image when i hover on the image then that part of image will be large in another division. i think you know what i want to say.

 

Posted on May 20, 2013 07:50 AM

This way.

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type = "text/javascript">
        $(".pic").live("mousemove", function (e) {
            var dv = $("#popup");
            if (dv.length == 0) {
                var src = $(this)[0].src;
                var dv = $("<div />").css({ height: 100, width: 100, position: "absolute" });
                var img = $("<img />").css({ height: 100, width: 100 }).attr("src", src);
                dv.append(img);
                dv.attr("id", "popup");
                $("body").append(dv);
            }
            dv.css({ left: e.pageX, top: e.pageY });
        });
        $(".pic").live("mouseout", function () {
            $("#popup").remove();
        });
        
 
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns = "false">
    <Columns>
    <asp:TemplateField>
    <ItemTemplate>
        <asp:Image ID="Image1" CssClass = "pic" style = "cursor:pointer;margin:10px" runat="server" Height = "100" Width = "100" ImageUrl = '<%# Eval("ImageUrl") %>' />
    </ItemTemplate>
    </asp:TemplateField>
    </Columns>
    </asp:GridView>
    </form>
</body>
</html>

 

  protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {

            DataTable dt = new DataTable();
            dt.Columns.AddRange(new DataColumn[1] { new DataColumn("ImageUrl") });
            dt.Rows.Add("http://www.aspforums.net/Avatars/Mudassar.jpg");
            dt.Rows.Add("http://www.aspforums.net/Avatars/shivanand.jpg");
            GridView1.DataSource = dt;
            GridView1.DataBind();

        }
    }