Mousewheel disabled

[coldpumpkin]

I'm not really using the mousewheel zoom, therefore I'd like to know how can users be able to still mousewheel the page even if they have the mouse on top of the image.

[timbotcom]

It's not easy, but I found a way to do it using the mousewheel plugin (https://github.com/jquery/jquery-mousewheel). You have to set it up so that mousewheel input disables elevatezoom when user scrolls, then re-enable it a period of time after the last scroll input (I chose .5 seconds).

My code to accomplish this is as follows (my image paths have php in them, as the images were called in a loop for a gallery):

jQuery(document).ready( function() {
    var zoomConfig = {zoomType  : "lens", lensShape : "round", borderColour: "#C2132F", lensSize : 200, cursor: "crosshair", responsive: true };  

    // path to the image
    var image = jQuery('#zoom_<?php echo $i ?>');      

    // this is a toggle i set up in the header of the page
    jQuery('#zoomToggle').on('click', function elevateZoom() {

        // if toggle is set to active 
        if (zoomStatus === 'active') {

            // function to turn elevate zoom on
            function scrollDone() {
            image.elevateZoom(zoomConfig);                                                                                                            
            }

            // setTimeout function to run scrollDone after 0.5seconds
            var scrollTimeout = setTimeout(scrollDone, 500);

            // function to reset the timer back to 0
            function resetActive() {
                clearTimeout(scrollTimeout);
                scrollTimeout = setTimeout(scrollDone, 500);                                                                                                                
            }

            // when user scrolls mouse
            jQuery('body').on('mousewheel', function(event) {

                // check if toggle in header is active
                if (zoomStatus === 'active') {

                    // turn off elevate zoom
                    jQuery('.zoomContainer').remove();
                    image.removeData('elevateZoom');
                    image.removeData('zoomImage');

                    // run function to reset the timer
                    resetActive();
                }
            });  
        } else {

            // turn off elevatezoom if toggled to off in header
            jQuery('.zoomContainer').remove();
            image.removeData('elevateZoom');
            image.removeData('zoomImage');
        }
    });                                                                                                
});