Simple jQuery Image Zoom With Mouse Wheel or Touch Scroll

File Size: 3.41 MB
Views Total: 50093
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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=""></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="//"></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() {
cssWrapperClass: 'custom-wrapper-class',
autoCenter: false,
loadingAnimation: 'throbber',
minZoom: 'contain',
maxZoom: false,
maxZoom: 1.0

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:


  • Version 2.1.3


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


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


  • Complete rewrite of plugin


  • Improved evet namespace


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


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


  • Improved positioning a little bit for better resize experience.


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


  • 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.