jQuery Example, jQuery to Retrieve Server's Current Time, jQuery Server time

Home Ajax Jquery jQuery to Image Magnifier

Google Advance Search
RoseIndia.Net Search

jQuery to Image Magnifier
Posted on: September 8, 2008 at 12:00 AM

In this first jQuery tutorial we will develop a program that 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" 
"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:

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.

Related Tags for jQuery to Image Magnifier:
jquery, query, image, tutorial, ria, this, if, ie, program, to, ram, e, il, im, dev, first, in, m, j, age, pro, tor, s, at, is, ir, ha, ll, develop, tutor, s, s, ri, th, st, hat, mage, pr, ogr, o

«Previous Index Next»