Simple jQuery Image Zoom With Mouse Wheel or Touch Scroll

Ap Image Zoom is a jQuery plugin which allows you to zoom in/out an image with mouse wheel or touch scroll. Also provides a simple image pan functionality which which allows to move an image via mouse drag or touch swipe.

How to use it:

1. Include jQuery library together with jQuery ap image zoom plugin's JS and CSS files in the document.

<link rel="stylesheet" href="css/ap-image-fullscreen.css">

<script src="ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/ap-image-zoom.js"></script>

2. Include the latest hammer.js JS library to add touch gestures support to the plugin.

<script src="js/hammer.min.js"></script>

3. Include the jQuery mousewheel plugin in the document.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.min.js"></script>

4. Insert a large image into your document.

<img src="1.jpg" width="325" height="425" alt="dirndl" id="image" style="display: none">

5. Call the plugin on the image and set the custom wrapper class option.

function initImage() {
$('#image').apImageZoom({
cssWrapperClass: 'custom-wrapper-class',
autoCenter: false,
loadingAnimation: 'throbber',
minZoom: 'contain',
maxZoom: false,
maxZoom: 1.0
});
};
initImage();

6. Style the image wrapper in the CSS.

.demo-wrapper {
  width: 800px;
  height: 600px;
}

7. Add the default settings.

imageUrl: undefined,

// Options: undefined, 'text', 'throbber', 'image'
loadingAnimation: undefined,	
loadingAnimationData: undefined,

// Options: value (float), false/null/undefined
loadingAnimationFadeOutDuration: 200,	
cssWrapperClass: undefined,

// Options: value (float), 'none', 'auto', 'contain', 'cover', 'min', 'max'
initialZoom: 'auto',	

// Options: value (float), 'contain', 'cover'
minZoom: 0.2,

// Options: value (float), 'contain', 'cover'
maxZoom: 1.0,	

// = 10% steps
zoomStep: 0.07,	

// Options: true, 'both', 'x', 'h', horizontal', 'y', 'v', vertical'
autoCenter : true,

hammerPluginEnabled: true,
mouseWheelPluginEnabled: true,
hardwareAcceleration: true,

disabled: false,
dragEnabled: true,
zoomEnabled: true,

// Options: function(), 'open', 'zoomIn', 'zoomOut', 'zoomMin', 'zoomMax', 'zoomToggle'
// swipeTop: ,
// swipeRight: ,
// swipeBottom: ,
// swipeLeft: ,
// click: ,
doubleClick: 'zoomToggle'

Change logs:

2016-03-09

• Version 2.1.3

2014-12-05

• Added class "apiz-loading" to wrapper while loading image.

2014-12-04

• New options for swipe gestures, click and double click: reset, center

2014-12-04

• Complete rewrite of plugin

2014-11-18

• Improved evet namespace

2014-10-01

• Improved throbber CSS animation.
• Improved and fixed trigger method.

2014-09-18

• Improved plugin so it can be called from a container with imageUrl

2014-09-17

• Improved positioning a little bit for better resize experience.

2014-09-16

• Added error handling when loading image fails.
• New Feature: new initialization mechanism for adding a loading

2014-09-13

• Complete rewrite auf plugin with lots of improvements.

 

---

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