jQuery to Image Magnifier

In this first jQuery tutorial we will develop a program that Image magnifier.

jQuery to Image Magnifier

jQuery to Image Magnifier


In this first jQuery tutorial we will develop a  program that  Image magnifier.

Steps to develop the program

 Step 1:

Create a new file (imagezoom.html) and add the following code into

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
<meta http-equiv="Content-Type" content="text/html; 
<title>Image Magnifier</title>
<script type="text/javascript" src="script/jquery.js">
<script type="text/javascript" src="script/zoom.js">
<script type="text/javascript">
xzoom: 150, 
yzoom: 150
<link rel="stylesheet" href="style/style.css" 
type="text/css" media="screen"/>
<link rel="stylesheet" href="style/zoom.css" 
type="text/css" media="screen"/>
<div id="wrapper" >
<p>Image Magnifier</p>
<div style="float:left;width:100%;clear:both;">
<div class="image">
<img src="images/christmas_small.jpg" 
alt="scarpa" jqimg="images/christmas.jpg">

Program explanation:

The following code includes the jQuery JavaScript library file:

<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/zoom.js"></script>


Function is called 


 When this function  having attributes 

  xzoom: 150, 
yzoom: 150

This set the height  and width of  enlarge image.


When you run the program in browser it will look like following screen shot:


Check online demo of the application

Learn from experts! Attend jQuery Training classes.