Zoom the image on mouse hover in asp.net Datalist control using magnify Jquery | ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF snippets and tutorial

Zoom the image on mouse hover in asp.net Datalist control using magnify Jquery

Introduction: In this article I try to explain how to zoom the image on mouse hover in asp.net Datalist control using magnify Jquery.

Description:

I have created a table for products (Tb_Product).

Zoom the image on mouse hover in asp.net Datalist control using magnify Jquery


Table having the data.
Zoom the image on mouse hover in asp.net Datalist control using magnify Jquery

 I am going to display the products detail in datalist control. I am using the magnify zoom Jquery plugin which zoom the image inside. Download the Bootstarp magnify Jquery. After downloading it link the Jquery and CSS to webform.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
   <script src="js/bootstrap-magnify.min.js"></script>
   <link rel="stylesheet" href="css/bootstrap-magnify.css">

After that darg and drop the control to webform.

Complete Html Markup of Webform
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
   <script src="js/bootstrap-magnify.min.js"></script>
   <link rel="stylesheet" href="css/bootstrap-magnify.css">
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DataList ID="dlproducts" runat="server" DataKeyField="Id">     
     <HeaderTemplate>  
     <table width="100%">  
          <thead><td><b>Product Name</b></td><td><b>Description</b></td><td>&nbsp;</td><td><b>Price</b></td></thead>
     </HeaderTemplate>
            <ItemTemplate>           
            <tr><td style="width:20%;><asp:Label ID="lblname" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label></td>
    <td style="width:30%;"><asp:Label ID="lbldescription" runat="server" Text='<%# Eval("ProductDescription") %>'></asp:Label></td>
    <td style="width:20%;"><img src='<%# ResolveUrl(Eval("Productimg").ToString()) %>' width="400" height="250" data-toggle="magnify" />
    </td>
    <td style="width: 10%;><asp:Label ID="lblprice" runat="server" Text='<%# Eval("Price") %>'></asp:Label>     
    </td></tr>
            </ItemTemplate>
        </asp:DataList>
    </div>
    </form>
</body>
</html>

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

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

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

VB:-
Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())
    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            BindDatalist()
        End If
    End Sub
    Public Sub BindDatalist()
        Try
            Dim adp As New SqlDataAdapter("Select * from Tb_Product", con)
            Dim dt As New DataTable()
            adp.Fill(dt)
            If dt.Rows.Count > 0 Then
                dlproducts.DataSource = dt
                dlproducts.DataBind()
            End If
        Catch ex As Exception
        End Try
    End Sub
Build, run the project and see the result.
 Result:-
Zoom the image on mouse hover in asp.net Datalist control using magnify Jquery

If you are face any problem to implement this you can download it.
Download

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

Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget