Jquery Image Zoom Plugin - elevatezoom

elevatezoom is a jQuery Image zoom script, with lots of configurations including window, lens and inner zoom modes, also has the ability for tints and easing and distributed under the GPL and MIT licenses.

Features:

• Fully Customisable
• Coloured Tints
• Fancybox Gallery Support
• External Controls
• Window Zoom, Lens Zoom and Inner Zoom
• Free to use under MIT and GPL Licenses

Usage:

1. Include jQuery Library and elevatezoom.js

<script type="text/javascript" src="jquery.js"></script>
<script src="jquery.elevatezoom.js" type="text/javascript"></script>

2. Markup

<img id="zoom_01" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

3. Call the plugin and done.

$('#zoom_01').elevateZoom();

4. All default options and callback functions.

zoomActivation: "hover", // Can also be click (PLACEHOLDER FOR NEXT VERSION)
zoomEnabled: true, //false disables zoomwindow from showing
preloading: 1, //by default, load all the images, if 0, then only load images after activated (PLACEHOLDER FOR NEXT VERSION)
zoomLevel: 1, //default zoom level of image
scrollZoom: false, //allow zoom on mousewheel, true to activate
scrollZoomIncrement: 0.1,  //steps of the scrollzoom
minZoomLevel: false,
maxZoomLevel: false,
easing: false,
easingAmount: 12,
lensSize: 200,
zoomWindowWidth: 400,
zoomWindowHeight: 400,
zoomWindowOffetx: 0,
zoomWindowOffety: 0,
zoomWindowPosition: 1,
zoomWindowBgColour: "#fff",
lensFadeIn: false,
lensFadeOut: false,
debug: false,
zoomWindowFadeIn: false,
zoomWindowFadeOut: false,
zoomWindowAlwaysShow: false,
zoomTintFadeIn: false,
zoomTintFadeOut: false,
borderSize: 4,
showLens: true,
borderColour: "#888",
lensBorderSize: 1,
lensBorderColour: "#000",
lensShape: "square", //can be "round"
zoomType: "window", //window is default,  also "lens" available -
containLensZoom: false,
lensColour: "white", //colour of the lens background
lensOpacity: 0.4, //opacity of the lens
lenszoom: false,
tint: false, //enable the tinting
tintColour: "#333", //default tint color, can be anything, red, #ccc, rgb(0,0,0)
tintOpacity: 0.4, //opacity of the tint
gallery: false,
galleryActiveClass: "zoomGalleryActive",
imageCrossfade: false,
constrainType: false,  //width or height
constrainSize: false,  //in pixels the dimensions you want to constrain on
loadingIcon: false, //http://www.example.com/spinner.gif
cursor:"default", // user should set to what they want the cursor as, if they have set a click function
responsive:true,
onComplete: $.noop,
onDestroy: function() {},
onZoomedImageLoaded: function() {},
onImageSwap: $.noop,
onImageSwapComplete: $.noop

Author: Andy Eades

Website: http://www.elevateweb.co.uk/image-zoom

---

This awesome jQuery plugin is developed by elevateweb. For more Advanced Usages, please check the demo page or visit the official website.