Wheelzoom: zooming IMG elements with the mousewheel/trackpad.

jQuery Wheelzoom is a small plugin for zooming IMG elements with the mousewheel/trackpad.

Wheelzoom works by scaling and positioning a background-image, after it sets the IMG element’s src to a transparent png.

Wheelzoom doesn’t add any extra elements to the DOM, or change the positioning of the IMG element.

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 it’s src. Then the src is set to a transparent PNG. The benefit to using a background-image is that plugin does not change the DOM or the positioning of the img element. This means that the plugin should just work regardless of your specific CSS or markup. The drawback that there is no support for background-sizing in older browsers (IE8). The img element is left unmodified for unsupported browsers.

Download: https://github.com/jackmoore/wheelzoom

Demonstration: https://www.jacklmoore.com/wheelzoom/

Plugin homepage: https://www.jacklmoore.com/wheelzoom/

Implementation:

1. FIRST, INCLUDE JQUERY FILES

<!-- include JS files -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="wheelzoom.jquery.js"></script>

2. ADD YOUR HTML

<p><img src="path_to_image" alt="Alternative Text" /></p>

3. NOW, CALL THE JRATING PLUGIN

<script type="text/javascript">
$(document).ready(function(){
  // Simple call
  $('img').wheelzoom();
 
  // or zoom sets the zoom percent.
  $('img').wheelzoom({zoom:0.05});
 
  // zooming out can be triggered by calling 'wheelzoom.reset'
  $('img').trigger('wheelzoom.reset');
});
</script>

Options:

Screenshots:

Creating a JavaScript Library

I recently wrote a JavaScript library for creating random colors and color schemes, and while I foun…

jQuery Flash Plugin

This jQuery plugin is for embedding Flash movies. Pages are progressively enhanced when Flash and Ja…

jQuery Optimization: Optimize Selector

We can also optimize our selector other than being a bit specific on our selector. The key to optimi…

jQuery drop down menu: droppy

Quick and dirty nested drop-down menu in the jQuery style. I needed a nav like this for a recent pro…

jQuery slideViewerPro: A “pro” jQuery image slider

slideViewerPro is a fully customizable jQuery image gallery engine which allows to create outstandin…

jQuery Optimization: Avoid Unnecessary Styling

This is another common mistake that many jQuery developer made. jQuery provides us with the ability …