Power Image Zoom Tour Using JQuery

Introduction

This article covers use of jQuery to create a Stunning Image Zoom Effect on your site or blog. The jQuery library has undoubtedly made the life of JavaScript programmers easier and made it possible for non-experts to do fancy stuff themselves. With jQuery, we can do a lot of really advanced and dynamic things by writing just a few lines of codes. Since its arrival, jQuery has revolutionized the way we do a great variety of web designing and developing tasks. With jQuery, we can create not only a simple photo gallery or slides but also some fancy animation schemes using texts and other objects.

As we all know, this effect would probably be useful for e-commerce sites, but I don't see any reason why you can't use it for any other sites. The basic idea is to have the image 'zoom' forward & show an approximately 25% larger version of the image. So let's get on with it.

Description

When we move the mouse over the image a magnifying glass appears over the image that allows the user to zoom in on any portion of it as it follows the cursor around the selected region. In that effect, the grainy, scaled-up image was then replaced with a hi-resolution version of the selected region. Furthermore, the magnification power can be adjusted on the fly by turning the mouse wheel back or forth, just like in many graphics programs. Lets take a closer look at this script's features. It's great to use on product images, photos, or other images with lots of details you want users to be able to get into on command. Now it's time to see how we will make it.

Note : To run this project download my attachment "PowerZoomer.rar"

Step 1 : First we have to create a web Application.

Go to Visual Studio 2010.
New--> And select the web Application.
Give it's a name whatever you want.
Click OK.

Step 2 : Secondly you have to add a new page to the website.

Go to the Solution Explorer.
Right-click on the Project name.
Select add new item.
Add new web page and give it a name.
Click OK

Step 3 : In this step we are adding two images in the "Image" folder of the project.

Step 4 : In this step we have to write the script reference to the aspx page; let us see from where you have to write the script code.

Right-click on both files respectively -> copy and paste it inside <Head> section of your page see step 5.

Step 5 : Let us see the script code that you have to add inside the <script></script> tags and will be placed either in the head section or body section as you want.

Step 6 : In this step we have to write the jQuery code which is given below.

Step 7 : This code is for the body of the Default2.aspx.

Body Code :

Step 8 : In this step we will see the complete code for the Default2.aspx page; let us 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>Power Zoomer Using jQuery </title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="Scripts/mypowerzoomer.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) { //fire on dom ready
$('#img1').addpowerzoom()
$('#img2').addpowerzoom({
defaultpower: 3,
powerrange: [3, 6],
largeimage: null,
magnifiersize: [110, 110] //<--no comma following last option!
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<img id="img1" src="Image/img1.jpg" /><br />
<br />
<img id="img2" src="Image/img2.jpg" />
</form>
</body>
</html>

Step 9 : In this step we will see the design of the Default2.aspx page which is given below.

Step 10 : In this step we are going to run the Default2.aspx page by pressing F5.

Now Mouse over the image1; you will see:

Now Mouse over the image2 you will see.

Resources