|
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
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
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
