Tuesday, July 7, 2015

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.

No comments:

Post a Comment