Swap the images OnClick and zoom on MouseHover using Jquery in asp.net - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

Swap the images OnClick and zoom on MouseHover using Jquery in asp.net

Introduction: In this article I try to explain how we can swap the images OnClick and zoom on MouseHover using Jquery in asp.net

Description:

In shopping website we saw the image swap functionality. Users click on the product thumbnail image which replaces the main image of product. I am using the Elevate Jquery to implement the swap functionality.

I have created two table Tb_Products (To store Products information)

Swap the images OnClick and zoom on MouseHover using Jquery in asp.net

Tb_ProductImage (To store the product image path)

Swap the images OnClick and zoom on MouseHover using Jquery in asp.net

Create a Store procedure to fetch the data/records from table.

Create Proc GetProductsDetail
As begin
Select tbp.ProductName,tbp.ProductDescription,tbp.Price,img.ProductImagePath from dbo.Tb_Products tbp
inner join dbo.Tb_ProductImage img on tbp.id = img.ProductID
End

Add a webform to project/website. Add the link the Elevate jquery to webpage. Add the below given code in Head section of page.
<style>
        table
        {
            margin-left:100px;
            margin-top:50px;
        }
        #largeimage
        {
            padding-bottom: 10px;
        }
        .imgthumbnail
        {
            height: 100px;
            width: 94px;
        }
        .active img{border:1px solid red !important;}
       </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="js/jquery.elevatezoom.js" type="text/javascript"></script>

<script>
     $(document).ready(function () {
         $("#productimage").elevateZoom({ gallery: 'gallery', cursor: 'pointer', galleryActiveClass: "active" });     
     });
</script>

Complete HTML Markup of page:-
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Image Swap Example</title>
    <style>
        table
        {
            margin-left:100px;
            margin-top:50px;
        }
        #largeimage
        {
            padding-bottom: 10px;
        }
        .imgthumbnail
        {
            height: 100px;
            width: 94px;
        }
        .active img{border:1px solid red !important;}
       </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="js/jquery.elevatezoom.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server"> 
       <table><tr><td>
    <div id="largeimage" class="divImage">
        <asp:Image ID="Img1" src="images/processing.gif" Style="padding-left: 250px; padding-top: 150px;
            display: none;" runat="server" />
        <asp:Image ID="productimage" runat="server" width="393px" CssClass="test"/>
    </div>
     <div id="gallery">
          <asp:Repeater ID="rptthumb" runat="server">
        <ItemTemplate>      
        <a  href="#" class="elevatezoom-gallery" data-update="" data-image='<%# ResolveUrl(Eval("ProductImagePath").ToString()) %>' data-zoom-image='<%# ResolveUrl(Eval("ProductImagePath").ToString()) %>'>
<img src='<%# ResolveUrl(Eval("ProductImagePath").ToString()) %>' class="imgthumbnail"  /></a>
               </ItemTemplate>
        </asp:Repeater>        </div>   
   </td>
   <td>
   <table>
   <tr><td>
      <h2><asp:Label ID="lblname" runat="server"></asp:Label></h2> </td></tr>
         <tr><td>
       <asp:Label ID="lbldescription" runat="server"></asp:Label></td></tr>
         <tr><td>
       <h3><asp:Label ID="lblprice" runat="server"></asp:Label></h3></td></tr>
   </table>
   </td>
   </tr></table>
    </form>    

 <script>
     $(document).ready(function () {
         $("#productimage").elevateZoom({ gallery: 'gallery', cursor: 'pointer', galleryActiveClass: "active" });     
     });
</script>     
</body>
</html>

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

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

Sqlconnection
C#:-
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());

VB:-
Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())

Now write the code to bind the data to repeater, image and label control.
C#:-
protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindRepeater();
        }
    }
    public void BindRepeater()
    {
        SqlDataAdapter adp = new SqlDataAdapter("GetProductsDetail", con);
        adp.SelectCommand.CommandType = CommandType.StoredProcedure;
       DataTable dt = new DataTable();
       adp.Fill(dt);
       if (dt.Rows.Count > 0)
       {
           productimage.ImageUrl = dt.Rows[0]["ProductImagePath"].ToString();
           lblname.Text = dt.Rows[0]["ProductName"].ToString();
           lbldescription.Text = dt.Rows[0]["ProductDescription"].ToString();
           lblprice.Text = dt.Rows[0]["Price"].ToString();
           rptthumb.DataSource = dt;
           rptthumb.DataBind();
        }
    }

VB:-
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
            BindRepeater()
        End If
    End Sub
    Public Sub BindRepeater()
        Dim adp As New SqlDataAdapter("GetProductsDetail", con)
        adp.SelectCommand.CommandType = CommandType.StoredProcedure
        Dim dt As New DataTable()
        adp.Fill(dt)
        If dt.Rows.Count > 0 Then
            productimage.ImageUrl = dt.Rows(0)("ProductImagePath").ToString()
            lblname.Text = dt.Rows(0)("ProductName").ToString()
            lbldescription.Text = dt.Rows(0)("ProductDescription").ToString()
            lblprice.Text = dt.Rows(0)("Price").ToString()
            rptthumb.DataSource = dt
            rptthumb.DataBind()
        End If
    End Sub


Build, run the project and see the result.
Result:-
Swap the images OnClick and zoom on MouseHover using Jquery in asp.net

Download:-
download

In this article we have learn how to swap the image OnClick and zoom on Mousehover using Jquery in Asp.net(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