Wheelzoom

A script to zoom IMG elements on mousewheel or touchpad scroll.

Demo

Daisy on the Ohoopee

Released under the MIT License, source on Github (changelog)

Download

Compatible with: Chrome, Firefox 17+, Safari, Opera, Internet Explorer 9+.

Usage:

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

// assign and set the zoom increment percentage
wheelzoom(document.querySelectorAll('img'), {zoom: 0.05});

// set a maximum zoom amount
wheelzoom(document.querySelectorAll('img'), {maxZoom: 2});

// zooming out can be triggered by calling 'wheelzoom.reset'
document.querySelector('img').dispatchEvent(new CustomEvent('wheelzoom.reset'));

// wheelzoom can be removed from an element by calling 'wheelzoom.destroy'
document.querySelector('img').dispatchEvent(new CustomEvent('wheelzoom.destroy'));

Wheelzoom doesn't change the DOM. It works by sizing and positioning background-size and background-position styles.

Wheelzoom replaces an img's background-image with its src. Then the src is set to a transparent image. The benefit to using a background-image is that script does not change the DOM or the positioning of the img element. This means that the script should Just Work™ regardless of your specific CSS or markup. The img element is left unmodified for unsupported browsers.

The source is short and well commented if you are curious to how it works. Email me if you run into any bugs.


Hey,

Follow me on Twitter and Github, that's where I'm most active these days. I welcome email (), but I'm afraid I no longer have time to answer personal requests for help regarding my plugins or posts. Thanks!