Installation :
Add first the last jQuery release, then the jQZoom script(don't forget this),the correct order is important.Look at the installation code below.
<script type='text/javascript' src='js/jquery-1.2.6.js'></script>
<script type='text/javascript' src='js/jquery.jqzoom-1.0.1.js'></script>
Add jqzoom.css to your header.
<link rel="stylesheet" type="text/css" href="css/jqzoom.css" />
How To Use :
Using jQZoom is easy,but you need to specify the HTML anchor element,that is going to generate the zoom revealing a portion of the enlarged image.
<a href="images/BIGIMAGE.JPG" class="MYCLASS" title="MYTITLE">
<img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE" >
</a>
The anchor element wraps the small image you would like to zoom.Following this schema the necessary and base elements are:
SMALLIMAGE.JPG: Represents the small image you would like to zoom.
BIGIMAGE.JPG: Represents the big image that jQZoom will reveal.
MYCLASS: Represents the anchor class,that would be used to instantiate the jQZoom script to all the elements matching this class(you can use an ID as well).
MYTITLE/IMAGE TITLE: Anchor title and/or image title that will be used to show the zoom title close to the jQZoom Window.
Now load the plugin at window load.
$(document).ready(function(){
$('.MYCLASS).jqzoom();
});
This would instantiate jQzoom in default(standard) mode.You can pass more options(Documentation section),to create special or custom effects as in the example below.
$(document).ready(function(){
var options = {
zoomWidth: 300,
zoomHeight: 250,
xOffset: 10,
yOffset: 0,
position: "right" //and MORE OPTIONS
};
$('.MYCLASS).jqzoom(options);
});
