Introduction
In this article we are
going to explore that how we will produce a zooming effect using jQuery. Further
in details in this we will see that whenever we dragged on the image from the
particular location then it an image which is on the side of the dragging image
will zoom slowly slowly. But it's only happened when we will drag on the
original images. We almost know that what the meaning of zooming, it's the
magnifying procedure of an image want to see it most clearly. But it's all
possible by using a jQuery plugin named as jQZoom which will make it much simple
to create such type of zooming effect. In this article we will see only the
dragging effect whenever we dragged an image then it zoomed. Now for applying
such type of functionality you have to follow some steps which is given below:
Step 1: Firstly you have to take a web
site let see how you will do it.
- Go to visual studio 2010
- New-> Select a website application
- Click OK.
Step 2: Secondly you have to add a new
page to the website let see how it will added.
- Go to the Solution Explorer.
- Right Click o Project name.
- Select add new item.
- Add new web page and give it a name.
- Click OK.
Step 3: In this step you have to add the
jQuery plugin named as jQZoom plugin and give the references to the
Default2.aspx page let see from where you have to add these jScript references:
Step 4: In this step you have to write
the code for adding the references of jScipt file the code is given below:
Step 5: In this step you have to add the
an image which will be of a small size and another one will be of big size these
two types of similar images added to the images folder let see the figure given
below:
Step 6: In this step we will write the
stylesheet code which will looks like given below:
Code:
<style
type="text/css">
body
{
margin:0px;padding:0px;font-family:Comic
Sans MS;
}
a
img,:link
img,:visited
img
{
border:5px
groove #2a2a2a;
}
table
{
border-collapse:
collapse; border-spacing:
0;
}
:focus
{
outline:none;
}
*
{
margin:0;padding:0;
}
.clearfix:after
{
clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden;
}
.clearfix
{
display:block;zoom:1
}
.imzoom
{
text-decoration:none;
float:left;
border:5px
groove yellow;
}
</style>
Step 7: In this step we will write the
jQuery code which is given below:
Step 8: In this step we will see the complete
code for the project let see the code given below:
Code:
<%@
Page Language="C#"
AutoEventWireup="true"
CodeFile="Default2.aspx.cs"
Inherits="Default2"
%>
<!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></title>
<script
src="Scripts/jquery-1.6.js"
type="text/javascript"></script>
<script
type="text/javascript"
src="Scripts/jquery-1.4.1.min.js"></script>
<script
src="Scripts/jquery.jqzoom-core.js"
type="text/javascript"></script>
<link
rel="stylesheet"
href="Styles/jquery.jqzoom.css"
type="text/css"/>
<style
type="text/css">
body
{
margin:0px;padding:0px;font-family:Comic
Sans MS;
}
a
img,:link
img,:visited
img
{
border:5px
groove #2a2a2a;
}
table
{
border-collapse:
collapse; border-spacing:
0;
}
:focus
{
outline:none;
}
*
{
margin:0;padding:0;
}
.clearfix:after
{
clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden;
}
.clearfix
{
display:block;zoom:1
}
.imzoom
{
text-decoration:none;
float:left;
border:5px
groove yellow;
}
</style>
<script
type="text/javascript">
$(document).ready(function () {
$('.imzoom').jqzoom({
zoomType: 'drag',
lens: true,
preloadImages: false
});
});
</script>
</head>
<body>
<div
class="clearfix"
id="content"
style="margin-top:100px;margin-left:350px;
height:500px;width:500px;"
>
<div
class="clearfix">
<a
href="images/bike3big.jpg"
class="imzoom"
rel='gal1'
title="Zooming on drag"
>
<img
src="images/bike3small.jpg"
title="triumph"
style="border:
4px groove #888888;" alt="img"/>
</a>
</div>
<br/>
</div>
</body>
</html>
Step 9: In this step we will see the
Design of the Default2.aspx page let see the figure given below:
Step 10: At last we are going to run the
application by pressing F5 let see the output given below:
Output 1: This output will see whenever
we run the Default2.aspx page:
Output 2: Whenever we will drag at any
position we will see that other side image get zoom:
Output 3: It will shows zoom on different
position it will continue till the dragging otherwise not:
Here are some resources which may help you: