Touch zooming doesn't work with jQuery Panzoom

Question

I've added jQuery Panzoom to my project. I'm showing an image full screen and I want to give the user the ability to zoom into that picture on iOS devices. Panning works, but zooming doesn't, and I don't know why. It also doesn't work in the Chrome debugging monitor when device simulation is enabled.

Even with the demos, pinch zooming doesn't seem to work. Is the plugin broken, or am I stupid?

https://github.com/timmywil/panzoom

I'm creating the div that contains the image dynamically.

zoomThumb: function (d, e) {
    let $imgPopup = $('<div>').addClass('fullScreenImage').appendTo($('body')).fadeIn();
    let $panzoom = $('<img>').attr('src', d.src.replace('Thumb/', '')).appendTo($imgPopup);
    $panzoom.panzoom({ disableZoom: false});

    // Mouse wheel zoom
    $imgPopup.on('mousewheel.focal', function (e) {
        e.preventDefault();
        var delta = e.delta || e.originalEvent.wheelDelta;
        var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
        $panzoom.panzoom('zoom', zoomOut, {
            animate: false,
            focal: e
        });
    });

    // Close button
    $('<div>').append($('<i>').addClass('fa').addClass('fa-times')).appendTo($imgPopup).click(function () {
        $imgPopup.fadeOut({ done: () => { $imgPopup.remove(); } });
    });

    e.stopPropagation();
}

.fullScreenImage {
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.8);
    display: none;
}

    .fullScreenImage > img {
        margin: auto;
        display: block;
        width: 80%;
    }

    .fullScreenImage > div {
        position: absolute;
        top: 15px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        transition: 0.3s;
    }

        .fullScreenImage > div:hover,
        .fullScreenImage > div:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }

Do you know how to fix that issue?

score 0 · Answer 1 · answered Feb 10 '20 at 09:59

in my project I needed to disable the pan event and the pinch and mouse wheel events didn't work. But if you look at this example you can enable it independently.

https://timmywil.com/panzoom/demo/


const panzoom = Panzoom(elem)
const parent = elem.parentElement
// No function bind needed
parent.addEventListener('wheel', panzoom.zoomWithWheel)

// This demo binds to shift + wheel
parent.addEventListener('wheel', function(event) {
  if (!event.shiftKey) return
  panzoom.zoomWithWheel(event)
})

For me this method has worked. I hope to help you.

Touch zooming doesn't work with jQuery Panzoom

1 Answers1