Developer : http://www.mind-projects.it/projects/jqzoom/index.php#download
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" />
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);});
Download :
