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:
Join the conversation! Your thoughts help the community grow.