Panzoom: Scrolling across pandzoom content

Created on 5 Oct 2015 · 2Comments · Source: timmywil/panzoom

Hello,

I would like scroll by swipping across the pandzoom content.

In my project the image has width: 100% of viewport, and when my Inch is on the pandzoom image, nothing appened, logic. But have you any tip for allow the scroll despite pandzoom ?

Example : When the image hasn't yet zoom ? when the image has zoom but the image is blocked by the limits of parent container ? When the scroll represent a certain percentage from bottom to top ?

Than'ks you

Source

ShakurOo

Most helpful comment

I needed this behavior as well. It would be nice if there was a flag "panOnlyWhenZoomed" that you could set that would allow you to swipe past panzoom when already at the minScale and only enable panning when zoomed in.

In the meantime you can fake the functionality pretty easily by checking whether the panzoom is scaled up past your minScale value and setting the disablePan accordingly. I tested this on iOS devices and in a variety of the Chrome device emulators and it seems to work fine:

// Set up panzoom container, making sure to disablePan by default
var $panzoom = $(".panzoom").panzoom({
    minScale: 1,
    disablePan: true
});

// After a zoom event, check zoomed state and reset the disablePanning
$panzoom.on('panzoomzoom', function(e, panzoom, scale, options) {
    $panzoom.panzoom("option", "disablePan", 
        Math.abs(scale - options.minScale) < 0.0001);
});

Edit: Tweaked it a bit to work in both properly in non-touch and made it a bit slimmer

kiddailey on 22 Oct 2015

👍2 🎉1 😄1

All 2 comments

// Set up panzoom container, making sure to disablePan by default
var $panzoom = $(".panzoom").panzoom({
    minScale: 1,
    disablePan: true
});

// After a zoom event, check zoomed state and reset the disablePanning
$panzoom.on('panzoomzoom', function(e, panzoom, scale, options) {
    $panzoom.panzoom("option", "disablePan", 
        Math.abs(scale - options.minScale) < 0.0001);
});

Edit: Tweaked it a bit to work in both properly in non-touch and made it a bit slimmer

kiddailey on 22 Oct 2015

👍2 🎉1 😄1

I agree. This function is very important, otherwise the lib is kinda useless .. especially on smaller touch devices.
It is not a very special case, that an image has 100% width on those devices and i think every end user will leave the page in case of being captured inside this image pan container :\