Upload all files and directories from the jQzoom package to your server.The current package includes the JS,CSS,IMAGES folders.
Note: If you decide to rename folders or to change the directory structure,take a look a the image paths inside the CSS and remember to specify the correct file paths in your calling page.

Add first the last jQuery release, then the jQZoom script(do not 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);
});
 
 
 

Configuration options:

You can choose between these options.

  • OPTION NAME
    DEFAULT
    DESCRIPTION
  • zoomType
    'standard'
    The other admitted option value is 'reverse',this is characterized by image opacity.
  • zoomWidth
    200
    The popup window width showing the zoomed area.
  • zoomHeight
    200
    The popup window height showing the zoomed area.
  • xOffset
    10
    The popup window x offset from the small image.(always positive value if the 'position' option is 'right/left', positive/negative if the 'position' option is 'top/bottom'.
  • yOffset
    0
    The popup window y offset from the small image.(positive/negative value if the 'position' option is 'right/left', always positive if the 'position' option is 'top/bottom'.
  • position
    'right'
    The popup window position.Admitted values:'right', 'left', 'top', 'bottom'
  • lens
    true
    if setted to false,the small lens,over the image, will not show.
  • imageOpacity
    0.2
    Set the image opacity when the 'zoomType' option is setted to 'reverse'.
  • title
    true
    Show a small title over the image it can be the anchor title and if not specified,it will get the small image title.
  • showEffect
    'show'
    The Effect by which showing the popup window.Options available: 'show', 'fadein'.
  • hideEffect
    'hide'
    The Effect by which hiding the popup window.Options available: 'hide', 'fadeout'.
  • fadeinSpeed
    'fast'
    Changes fade in speed,in case the showEffect option is setted to 'fadein'.(options: 'fast', 'slow', 'medium')
  • fadeoutSpeed
    'slow'
    Changes fade out speed,in case the hideEffect option is setted to 'fadeout'.(options: 'fast', 'slow', 'medium')
  • showPreload
    true
    Show the preload loading indicator.(options: 'true', 'false')
  • preloadText
    'Loading zoom'
    Option to customize the preload indicator text.
  • preloadPosition
    'center'
    By default the preload indicator is centered over the small image.You can optionally use the 'bycss' option letting you to change its position by css.

 

Style customizations are obviously admitted simply changing the right parameters value in the 'jqzoom.css' file.

 





Example 1 - Standard Zoom

JAVASCRIPT (Mouseover the image.) 

var options =
            {
                zoomWidth: 250,
                zoomHeight: 250
            }
            $(".jqzoom").jqzoom(options);
Example 2 - Reverse Zoom

JAVASCRIPT (Mouseover the image.) 

            var options2 =
            {
                zoomWidth: 250,
                zoomHeight: 250,
                zoomType:'reverse'
            }

            $(".jqzoom2").jqzoom(options2);
Example 3 - Zoom without lens

JAVASCRIPT (Mouseover the image.) 

            var options3 =
            {
                zoomWidth: 200,
                zoomHeight: 200,
                xOffset: 20,
                title: false,
                lens:false

            }

            $(".jqzoom3").jqzoom(options3);
Example 4 - Custom positioning

JAVASCRIPT (Mouseover the image.) 

            var options4 =
            {

                zoomWidth: 300,
                zoomHeight: 200,
                position : 'right',
                yOffset :-100,
                xOffset :100,
                title :false


            }
            $(".jqzoom4").jqzoom(options4);
Example 5 - Fade out effect while hiding

JAVASCRIPT (Mouseover the image.) 

            var options5 =
            {
                zoomWidth: 250,
                zoomHeight: 250,
                showEffect:'show',
                hideEffect:'fadeout',
                fadeoutSpeed: 'slow',
                title :false
            }
            $(".jqzoom5").jqzoom(options5);
Example 6 - Fixed IE6- select box bug(for IE)

JAVASCRIPT (Mouseover the image.) 

            var options6 =
            {
                zoomWidth: 250,
                zoomHeight: 250
            }
            $(".jqzoom6").jqzoom(options6);