This post describe how to create simple image zoom in and
zoom out effect with jQuery and css by step by step.
Step1: First you have to create a web application in visual
studio.
i>Go to visual studio
ii>open a new web project
iii> Give it name whatever you want
iv> Click ok
Step2: second
you have to add new page in the project
i> Go to the solution explorer
ii> Right click on the project name
iii> select Add new items and give it a name
iv> click ok
Step3: Add some image in “image ” folder of the project
Step4: Add css code inside the header section. Below code is
given
<style type="text/css">
#image
{
width:100%;
overflow:hidden;
}
#image
a
{
position:relative;
float:left;
margin:5px;
}
#image
a span
{
background-repeat:no-repeat;
width:48px;
height:48px;
position:absolute;
left:15px;
right:15px;
}
#image
{
border:solid 1px #999;
padding:5px;
}
</style>
Step5: Add JQuery code . If you are using Visual studio 2010
then it already have jQuery file when you are creating new web site. If you are
using 2008 then you have to download Jquery File.See the figure..
Step6: Write the given code inside the header section.
<script src="Scripts/jquery-1.4.1.min.js" type="text/jscript"></script>
Step7: add javaScript
code in the header section which is given below
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#image').width(200);
$('#image').mouseover(function
() {
$(this).css("cursor",
"pointer");
$(this).animate({ width: "500px"
}, 'slow');
});
$('#image').mouseout(function
() {
$(this).css("cursor",
"pointer");
$(this).animate({ width: "200px"
}, 'slow');
});
});
</script>
Step8: Design page
Deafult.aspx:-
<body>
<form id="form1" runat="server">
<div>
<h1>Image Zoom </h1><br />
<a>
<asp:Image ID="image" runat="server" ImageUrl="~/image/1.jpg" />
</a>
</div>
</form>
</body>
Step9: Full code
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Image Zoom</title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/jscript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#image').width(200);
$('#image').mouseover(function
() {
$(this).css("cursor", "pointer");
$(this).animate({ width: "500px"
}, 'slow');
});
$('#image').mouseout(function
() {
$(this).css("cursor",
"pointer");
$(this).animate({ width: "200px"
}, 'slow');
});
});
</script>
<style type="text/css">
#image
{
width:100%;
overflow:hidden;
}
#image
a
{
position:relative;
float:left;
margin:5px;
}
#image
a span
{
background-repeat:no-repeat;
width:48px;
height:48px;
position:absolute;
left:15px;
right:15px;
}
#image
{
border:solid 1px #999;
padding:5px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Image Zoom </h1><br />
<a>
<asp:Image ID="image" runat="server" ImageUrl="~/image/1.jpg" />
</a>
</div>
</form>
</body>
</html>
Run the code and see the output.
