Zoom the image on mouse hover in asp.net Gridview data control using Elevate Jquery - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

Zoom the image on mouse hover in asp.net Gridview data control using Elevate Jquery

Introduction: In this article I try to explain how we can zoom the image on mousehover in Asp.net Gridview data control as shopping website using Jquery

Description:
We commonly saw the zooming functionality on E-coomerce (Shoping) websites e.g. Amazon, Flipcart etc. when we move the mouse pointer on product image, it enlarge the image in pop up like window.
To implement this functionality I am using Elevate Zoom Jquery.

I have a table.

Zoom the image on mouse hover in asp.net Gridview data control using Jquery

Table having data.



Thumbnail or small image is display in the Gridview control and large image of product will be display as enlarge image on mousehover.
Now add a webform to ptoject. Add the jquery to webpage in Head section of page.
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="js/jquery.elevatezoom.js" type="text/javascript"></script>
   <script>
        $(function () {
            $("[id*=GridView1] img").elevateZoom({
                cursor: 'pointer',
                tint:true,
                tintColour:'#F90',
                tintOpacity:0.5,
            });
        });
</script>

Drag and drop the Gridview Data Control to webform.
Complete HTML Markup of Page:-
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="js/jquery.elevatezoom.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
        <Columns>
        <asp:BoundField DataField="ProductName" HeaderText="Product Name" />
         <asp:BoundField DataField="ProductDescription" HeaderText="Description" />
          <asp:BoundField DataField="Price" HeaderText="Price" />
        <asp:TemplateField>
        <ItemTemplate>
     <asp:Image ID="img" runat="server"  ImageUrl='<%# Eval("thumbimg") %>' data-zoom-image='<%# ResolveUrl(Eval("largeimg").ToString()) %>'/>
        </ItemTemplate>
        </asp:TemplateField>
        </Columns>
        </asp:GridView>
    </div>
    </form>
        <script>
        $(function () {
            $("[id*=GridView1] img").elevateZoom({
                cursor: 'pointer',
                tint:true,
                tintColour:'#F90',
                tintOpacity:0.5,
            });
        });
</script>
</body>
</html>

Add the namespaces.
C#:-
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

VB:-
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Write the code to bind the gridview.
C#:-
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Bindgrid();
        }
    }
    public void Bindgrid()
    {
        SqlDataAdapter adp = new SqlDataAdapter("Select * from Tb_Product", con);
        DataTable dt = new DataTable();
        adp.Fill(dt);
        if (dt.Rows.Count > 0)
        {
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
    }

 VB:-
  Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())
    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Bindgrid()
        End If
    End Sub
    Public Sub Bindgrid()
        Dim adp As New SqlDataAdapter("Select * from Tb_Product", con)
        Dim dt As New DataTable()
        adp.Fill(dt)
        If dt.Rows.Count > 0 Then
            GridView1.DataSource = dt
            GridView1.DataBind()
        End If
    End Sub

Build, run the project and see the result.
Result:-



Zoom the image on mouse hover in asp.net Gridview data control using Jquery

Download:-
Downlaod

 In this article we have learn how to zoom the image on mousehover in asp.net gridview control using Elevate Jquery (C#,VB). I hope you enjoyed this article. 

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon