How would I enable zoom using mouse wheel?

Question

I have a gallery of images that users will navigate using only the mouse.

I'd like them to be able to zoom in and out using the mouse wheel as well as double clicking.

Answer 1

What about doing something like this:

var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x

if (document.attachEvent) { //if IE (and Opera depending on user setting)
    document.attachEvent("on"+mousewheelevt, function(e){
      alert('Mouse wheel movement detected!')})
} else if (document.addEventListener) { //WC3 browsers
    document.addEventListener(mousewheelevt, function(e){
      alert('Mouse wheel movement detected!')
}, false)}

In order for you to do the zoom, you will probably have to do some extra work with Javascript and CSS, like:

.zoom {
  zoom: 150%;
}

Here is a resource