Introduction: In this article
I try to explain how we can swap the images OnClick using Jquery in asp.net
Description:
In
the previous article I have explained How to Change the image on MouseHoverlike shopping website using Jquery in asp.net, Zoom the image on mouse hover inasp.net Gridview data control using Elevate Jquery and Change image onMouseHover using Jquery in asp.net.
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)
Tb_ProductImage
(To store the product image path)
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:-
Download:-
In this article we have learn how to swap the image OnClick using Jquery in Asp.net(C#,VB). I hope you enjoyed this article. Please post you comment, query and feedback about this article. You can like me on Facebook, Google+, Linkedin and Twitter via hit on Follow us Button and also can get update follow by Email.
.png)
No comments:
Post a Comment