View on GitHub

wheelzoom-revived

Simple Javascript library for zooming IMG elements with the mousewheel.

Download this project as a .zip file Download this project as a tar.gz file

Gulp CI

Wheelzoom Usage

Usage Demo

Based on this script, which is no longer manteined.

This is a pure Javascript library for zooming IMG elements with the mousewheel/trackpad. Wheelzoom works by replacing the img element’s src with a transparent image, then using the original src as a background image, which can be sized and positioned. Wheelzoom doesn’t add any extra elements to the DOM, or change the positioning of the IMG element.

Usage

Supported Browsers

Chrome, Safari, Opera, FireFox 17+, IE9+.

Instantiate wheelzoom

wheelzoom(document.querySelectorAll('img'));

// set zoom percent
wheelzoom(document.querySelectorAll('img'), {zoom:0.05});

// set max-zoom scale
var images = wheelzoom([
    document.getElementById('img-1'),
    document.getElementById('img-2'),
], {zoom:0.05, maxZoom:20});

Subscribe for events

images[0].addEventListener('wheelzoom.reset', function(e) {
	console.log('wheelzoom.reset fired');
});

Fire events

triggerEvent(images[0], 'wheelzoom.destroy');

Events available

Event name Description
wheelzoom.reset Fired when image zoom level return to zero.
wheelzoom.destroy Firing this event is possible to reset wheelzoom behaviour (see above example).
wheelzoom.in Fired when image is zoomed in (see full demo example).
wheelzoom.out Fired when image is zoomed out (see full demo example).
wheelzoom.dragstart Fired when start dragging on the image (see full demo example).
wheelzoom.drag Fired when image is dragged (see full demo example).
wheelzoom.dragend Fired when end dragging on the image (see full demo example).

Configuration

Name Description Default value
zoom The mouse wheel zoom ratio 0.10
pinchSensibility The pinch touch zoom ratio 0.3
maxZoom Max zoom value for an image -1

API Documentation

Function Output Description
wheelzoom.images Array return all wheelzoom images
wheelzoom.resetAll undefined Reset all wheelzoom images
wheelzoom.destroyAll undefined Destroy all wheelzoom images

License

MIT License