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.