Panzoom: Rolar pelo conteúdo do pandzoom

Criado em 5 out. 2015 · 2Comentários · Fonte: timmywil/panzoom

Olá,

Eu gostaria de rolar deslizando pelo conteúdo do pandzoom.

No meu projeto a imagem tem largura: 100% da viewport, e quando minha Inch está na imagem do pandzoom, nada foi acrescentado, lógica. Mas você tem alguma dica para permitir o scroll apesar do pandzoom?

Exemplo: Quando a imagem ainda não foi ampliada? quando a imagem tem zoom mas a imagem está bloqueada pelos limites do container pai ? Quando o scroll representa uma certa porcentagem de baixo para cima ?

Te agradece

Fonte

ShakurOo

Comentários muito úteis

Eu precisava desse comportamento também. Seria bom se houvesse um sinalizador "panOnlyWhenZoomed" que você pudesse definir que permitisse passar o panzoom quando já estiver no minScale e habilitar o panning apenas quando ampliado.

Enquanto isso, você pode falsificar a funcionalidade facilmente verificando se o panzoom está dimensionado além do valor minScale e definindo o disablePan de acordo. Eu testei isso em dispositivos iOS e em vários emuladores de dispositivos Chrome e parece funcionar bem:

// 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: Ajustado um pouco para funcionar corretamente em não-toque e torná-lo um pouco mais fino

kiddailey em 22 out. 2015

👍2 🎉1 😄1

Todos 2 comentários

// 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: Ajustado um pouco para funcionar corretamente em não-toque e torná-lo um pouco mais fino

kiddailey em 22 out. 2015

👍2 🎉1 😄1

Eu concordo. Essa função é muito importante, senão a lib fica meio inútil.. principalmente em aparelhos touch menores.
Não é um caso muito especial, que uma imagem tenha 100% de largura nesses dispositivos e acho que todo usuário final sairá da página no caso de ser capturado dentro desse contêiner de imagem :\