jQuery to Image Magnifier

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

Ads

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" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
charset=ISO-8859-1">
<title>Image Magnifier</title>
<script type="text/javascript" src="script/jquery.js">
</script>
<script type="text/javascript" src="script/zoom.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".image").jqueryzoom({
xzoom: 150, 
yzoom: 150
});
});
</script>
<link rel="stylesheet" href="style/style.css" 
type="text/css" media="screen"/>
<link rel="stylesheet" href="style/zoom.css" 
type="text/css" media="screen"/>
</head>
<body>
<div id="wrapper" >
<br><br><br> 
<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">
</div>
</div>
</div>
</body>
</html>

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 

$(".jqzoom").jqueryzoom

 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.

Advertisements

Share on Google+Share on Google+

jQuery to Image Magnifier

Posted on: September 8, 2008 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Advertisements

 

Discuss: jQuery to Image Magnifier   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:0

Ads

 

Ads