jqZoom : Javascript images magnifiers for jQuery

JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.
jQzoom is a great and a really easy to use script to magnify what you want.

DOWNLOADDEMONSTRATIONPLUGIN HOMEPAGE

• IMPLEMENTATION
• OPTIONS
• SCREENSHOTS

IMPLEMENTATION: 

1. First, include CSS & jQuery files

1 2 3 4 5 6

<!-- CSS files --> <link rel="stylesheet" type="text/css" href="jquery.jqzoom.css">   <!-- Js Files --> <script type='text/javascript' src='jquery-1.5.xx.js'></script>   <script type='text/javascript' src='jquery.jqzoom-core.js'></script>

2. Write your HTML

1 2 3 4 5

<!-- 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>

3. Finnaly, call the plugin

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<script type="text/javascript">         $(document).ready(function() {                 /* simple call */                 $('.MYCLASS').jqzoom();                                 /* more complex call*/                 var options = {                     zoomType: 'standard',                     lens:true,                     preloadImages: true,                     alwaysOn:false,                     zoomWidth: 300,                     zoomHeight: 250,                     xOffset:90,                     yOffset:30,                     position:'left'                     //...MORE OPTIONS                  };                  $('.MYCLASS').jqzoom(options);         }); </script>

OPTIONS: 

zoomType

String

Default : standart - The others admitted option values are 'reverse','drag','innerzoom'.

zoomWidth

Integer

Default : 300 - The popup window width showing the zoomed area.

zoomHeight

Integer

Default : 300 - The popup window height showing the zoomed area.

xOffset

Integer

Default : 10 - The popup window x offset from the small image. (always positive to move the popup window more on the right if position is "right" or more on the left if position is "left")

yOffset

Integer

Default : 0 - The popup window y offset from the small image. (always positive to move the popup window more on the top if position is "top" or more on the bottom if position is "bottom"),

position

String

Default : right - The popup window position.Admitted values:'right' ,'left' ,'top' ,'bottom'

preloadImages

Boolean

Default : true - if set to true,jqzoom will preload large images.

preloadText

String

Default : Loading zoom - The text to show while preloading images.

title

Boolean

Default : true - Show a small title over the zoomed window it can be the anchor title and if not specified,it will get the small image title.

lens

Boolean

Default : true - if set to false,the small lens,over the image, won't show.

imageOpacity

Float

Default : 0.4 - Set the image opacity when the 'zoomType' option is set to 'reverse'.

showEffect

String

Default : show - The effect by which showing the popup window.Options available: 'show' ,'fadein'.

hideEffect

String

Default : hide - The effect by which hiding the popup window.Options available: 'hide' ,'fadeout'.

fadeinSpeed

String

Default : slow - Changes fade in speed,in case the showEffect option is set to 'fadein'.(options: 'fast','slow',number)

fadeoutSpeed

String

Default : 2000 - Changes fade out speed,in case the hideEffect option is set to 'fadeout'.(options: 'fast','slow',number)

SCREENSHOTS

• 
• 
  Standart zoom with thumbnails
• 
  Reverse zoom
• 
  Inner zoom
• 
  Always on zoom