Customizable jQuery Image Zoom And Pan Plugin - panzoom

panzoom is a jQuery plugin that lets you implement pan and zoom functionality on any images.

Features:

• Automatically generate a thumbnail for your large image.
• Move the Magnifying Lens inside the thumbnail to view the part of the zoomed image.
• Click on the plus / minus icons to zoom in / out the image.
• You can also zoom in / out the image using mouse wheel.
• Pan the zoomed image using mouse drag.
• Heavily customizable via a plenty of options.

How to use it:

1. Insert a high solution image into your web page.

<img class="demo" src="1.jpg" alt="Demo">

2. Load jQuery library and the jQuery panzoom plugin at the bottom of the web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="src/jquery.panzoom.js"></script>

3. Style the zoom buttons.

.zoom-btn {
  background-position: center;
  background-repeat: no-repeat;
  z-index: 999999999;
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid black;
}

.zoom-btn-plus {
  background: white url('../images/plus.png') no-repeat center;
  top: 4px;
  left: 4px;
}

.zoom-btn-minus {
  background: white url('../images/minus.png') no-repeat center;
  top: 4px;
  left: 30px;
}

4. Initialize the plugin.

jQuery('img').load(function() {
  jQuery(".photo").jspanzoom();
});

5. Default options.

// Can also be click (PLACEHOLDER FOR NEXT VERSION)
zoomActivation: "hover", 

// false disables zoomwindow from showing
zoomEnabled: true, 

// by default, load all the images, 
// if 0, then only load images after activated (PLACEHOLDER FOR NEXT VERSION)
preloading: 1, 

//default zoom level of image
zoomLevel: 1, 

// allow zoom on mousewheel, true to activate
scrollZoom: false, 

// steps of the scrollzoom
scrollZoomIncrement: 0.1, 

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",

// can be "round"
lensShape: "square", 

// window is default,  also "lens" available
zoomType: "window", 

containLensZoom: false,

// colour of the lens background
lensColour: "white", 

// opacity of the lens
lensOpacity: 0.4, 

lenszoom: false,

// enable the tinting
tint: false, 

// default tint color, 
// can be anything, red, #ccc, rgb(0,0,0)
tintColour: "#333", 

// opacity of the tint
tintOpacity: 0.4, 

gallery: false,
galleryActiveClass: "zoomGalleryActive",
imageCrossfade: false,

// width or height
constrainType: false,  

// in pixels the dimensions you want to constrain on
constrainSize: false,  

// loading spinner GIF
loadingIcon: false, 

// user should set to what they want the cursor as, 
// if they have set a click function
cursor:"default", 

// for responsive web layout
responsive:true,

// callback functions
onComplete: $.noop,
onZoomedImageLoaded: function() {},
onImageSwap: $.noop,
onImageSwapComplete: $.noop

---

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