Zoom an Image by dragging using jQuery

Sapna
13y
3.4k
0
0

Article

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: