A small script 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 is dependency free, doesn't add any extra elements to the DOM, or change the positioning of the IMG element.
wheelzoom(document.querySelectorAll('img'));
// or
wheelzoom(document.querySelectorAll('img'), {zoom:0.05});
// zoom sets the zoom percent.
Chrome, Safari, Opera, FireFox 17 , IE9 .
- Replaced canvas data URI with base64 svg for creating placeholder
- Dropped IE9 support
- Added 'initialZoom' option. Resolves #32
- Added package.json & added to NPM.
- Added 'maxZoom' option for maximum zoom level.
- Automatically account for changes to the img src, to avoid requiring manually calling destroy and reapply.
- Fixed zoom positioning issue in Firefox. Fixes #17
- Fixed error when calling destroy in Firefox. Fixes #16
- Removed debugging statement. Fixes #15
- Fixed lint warnings and bug introduced in 3.0.1
- Fixed issue with src URLs that contain single quotes. Fixes #13.
- Removed jQuery dependency
- Added 'wheelzoom.destroy' event for removing changes that wheelzoom has made to an element.
- Merged bugfix to wrap background-image path in quotes. Ref #8.
- Simplified by dropping support for having border and padding on the img element. Borders and/or padding should be applied to the parent element, rather than the img element.
- Minor code improvement.
- Fixed bug with unzoom trigger.
- Added trigger to unzoom image:
$('#example').trigger('wheelzoom.reset')
- Added dragging.
- Initial release.