jQuery image zoom – ZoomIt

Version: 1.0.1
License: Creative Commons License
Price: Free
# Downloads: 10036
Compatible with: IE7, IE8, IE9, IE10, Firefox, Safari, Opera, Chrome

jQuery Image Zoom plugin provides a detailed view of smaller images placed into web pages proving itself specially useful on websites that need to display high resolution photos of products that can’t be displayed directly into web pages.

Features

  • Touch enabled – works on touch-enabled devices like iPad, iPhone or Android;
  • Unlimited zooms on page – will not break your designs;
  • Two image sizes – using a smaller image to display in page will decrease page loading time;
  • Back-end loading – high resolution image will load only on demand (ie. when users wants to see the detailed view);
  • Style with CSS – by providing custom CSS classes you can style all aspects of zoom (preview area, high resolution image loading, zoomed image area);
  • Uses jQuery – this means you can easily use it on any WordPress blog.

Usage

First thing to do is to place the script files into your page header section:

<!DOCTYPE html>
<html lang="en-US">
<head>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery-ui-drag.js"></script>
<script language="javascript" type="text/javascript" src="zoomit.jquery.js"></script>
</head>
<!-- rest of page goes below -->

Please note that if you don’t plan on using the drag feature for moving the zoomed area over the small image, there’s no need for jQuery UI Drag widget. Also, if for some reason Drag isn’t available but you still want to use it (perhaps you forgot to also load UI Drag), the plugin will use the default mouseover event and issue no errors.

jQuery Image Zoom works on <a> elements. Make sure that the elements you use jqZoomIt() have css display:block set on them.

jQuery('a.my-class').jqZoomIt();

A more complete implementation would probably look like this:

;(function($){
	$(document).ready( function(){
		$( 'a.my-class' ).jqZoomIt();	
	})	
})(jQuery);

Parameters

PropertyDefaultValuesDescription
mouseEventmouseenterclick, mouseenter, mouseoverEvent that triggers the zoom.
zoomAreaMovemousemovedrag, mousemoveEvent that changes the zoomed area.
zoomPositionrighttop, right, bottom, leftPosition of zoom related to zoomed image.
zoomClasszoomIt_zoomedZoomed image container CSS class.
zoomLoadingClasszoomIt_loadingCSS class to apply before the large image is fully loaded.
zoomAreaClasszoomIt_areaCSS class for highlighted zoom area on small image.
zoomAreaColor#FFFFFFColor of zoomed area on small image.
zoomAreaOpacity0.5Highlighted zoomed area opacity.
zoomDistance10Distance of zoom container for large image from the small image.
multiplierX1.2Width of zoomed image related to small image.
multiplierY1.2Height of zoomed image related to small image.
is_touchnullnull, true, falseTouch devices detection. If left to null, the plugin will try to determine the browser version by itself. If true/false, internal functionality will be bypassed and the result provided on initialization will be used.

Events

EventReturnDescription
initnullTriggers after the script is ready.
zoomnullTriggers on zoom open.
closenullTriggers when zoom closes.

Changelog

  • 1.0.1

    - added demo to download showing how to create a small zoom gallery.

  • 1.0

    - Initial release

Latest forum discussions