Wheelzoom

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.

DEMO

Here you can find a full usage example, enjoy :)

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

License

MIT License