Download Simple jQuery Image Zoom With Mouse Wheel or Touch Scroll

This time I will share jQuery Plugin and tutorial about Simple jQuery Image Zoom With Mouse Wheel or Touch Scroll, hope it will help you in programming stack.

File Size:	3.41 MB
Views Total:	44564
Last Update:	5 years ago
Publish Date:	7 years ago
Official Website:	Go to website
License:	MIT

Demo Download

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.

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

2
 
3
<script src="ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

4
<script src="js/ap-image-zoom.js"></script>

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

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

3. Include the jQuery mousewheel plugin in the document.

`1`	`<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.

`1`	`<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.

01
function initImage() {

02
$('#image').apImageZoom({

03
cssWrapperClass: 'custom-wrapper-class',

04
autoCenter: false,

05
loading<a href="https://www.jqueryscript.net/animation/">Animation</a>: 'throbber',

06
minZoom: 'contain',

07
maxZoom: false,

08
maxZoom: 1.0

09
});

10
};

11
initImage();

6. Style the image wrapper in the CSS.

1
.demo-wrapper {

2
  width: 800px;

3
  height: 600px;

4
}

7. Add the default settings.

01
imageUrl: undefined,

02
 
03
// Options: undefined, 'text', 'throbber', 'image'

04
loadingAnimation: undefined,  

05
loadingAnimationData: undefined,

06
 
07
// Options: value (float), false/null/undefined

08
loadingAnimationFadeOutDuration: 200, 

09
cssWrapperClass: undefined,

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

12
initialZoom: 'auto',  

13
 
14
// Options: value (float), 'contain', 'cover'

15
minZoom: 0.2,

16
 
17
// Options: value (float), 'contain', 'cover'

18
maxZoom: 1.0, 

19
 
20
// = 10% steps

21
zoomStep: 0.07, 

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

24
autoCenter : true,

25
 
26
hammerPluginEnabled: true,

27
mouseWheelPluginEnabled: true,

28
hardwareAcceleration: true,

29
 
30
disabled: false,

31
dragEnabled: true,

32
zoomEnabled: true,

33
 
34
// Options: function(), 'open', 'zoomIn', 'zoomOut', 'zoomMin', 'zoomMax', 'zoomToggle'

35
// swipeTop: ,

36
// swipeRight: ,

37
// swipeBottom: ,

38
// swipeLeft: ,

39
// click: ,

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

source : jqueryscript.net

How to use it:

Change logs:

Share this:

Related posts: