Home Tutorial Jquery Zoom Image section using jQuery plug-in

 
 

Share on Google+Share on Google+
Zoom Image section using jQuery plug-in
Posted on: August 11, 2010 at 12:00 AM
Advertisement
In this section, you will learn how to zoom an image section by hovering mouse on it using jQuery.

Zoom Image section using jQuery plug-in

In this section, you will learn how to zoom an image section by hovering mouse on it using jQuery. The plug-in ,we are using here, is "zoom.js". For zooming an image you must have image in small size as well as in big size both must be reside in same folder. After that you have to set the image selection area by setting "xzoom" & "yzoom" attribute . These attributes create a moving box which is used for selecting particular section of the image. When you hover this box on image's any area , it will zoom that area.

zoomImage.html

<!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="jquery-1.4.2.js"></script>
<script type="text/javascript" src="zoom/zoom.js"></script>

<script type="text/javascript">

$(document).ready(function(){
$(".image").jqueryzoom({
xzoom: 100,
yzoom: 100

});



});
</script>
<link rel="stylesheet" href="zoom/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="zoom/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="zoom/jquery_small.jpeg" alt="light" jqimg="zoom/jquery_big.jpeg">

</div>
</div>


</div>
</body>
</html>

OUTPUT

When you hover Image on particular section :

Download Source Code

Click here to see demo

Advertisement

Related Tags for Zoom Image section using jQuery plug-in:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: August 11, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com