Panzoom: Desplazarse por el contenido de pandzoom

Creado en 5 oct. 2015 · 2Comentarios · Fuente: timmywil/panzoom

Hola,

Me gustaría desplazarme deslizando el dedo por el contenido de pandzoom.

En mi proyecto, la imagen tiene ancho: 100% de la ventana gráfica, y cuando mi pulgada está en la imagen de pandzoom, no aparece nada, lógica. Pero, ¿tiene algún consejo para permitir el desplazamiento a pesar de pandzoom?

Ejemplo: ¿Cuándo la imagen aún no tiene zoom? cuando la imagen tiene zoom pero la imagen está bloqueada por los límites del contenedor principal? ¿Cuándo el pergamino representa un cierto porcentaje de abajo hacia arriba?

Gracias

Fuente

ShakurOo

Comentario más útil

Necesitaba este comportamiento también. Sería bueno si hubiera un indicador "panOnlyWhenZoomed" que pudiera configurar y que le permitiera pasar el zoom panorámico cuando ya está en minScale y solo habilitar el paneo cuando se acerca.

Mientras tanto, puede falsificar la funcionalidad con bastante facilidad comprobando si el zoom panorámico se amplía más allá de su valor minScale y configurando disabledPan en consecuencia. Probé esto en dispositivos iOS y en una variedad de emuladores de dispositivos Chrome y parece funcionar bien:

// 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);
});

Editar: lo ajustó un poco para que funcione correctamente en ambos no táctiles y lo hizo un poco más delgado

kiddailey en 22 oct. 2015

👍2 🎉1 😄1

Todos 2 comentarios

// 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);
});

Editar: lo ajustó un poco para que funcione correctamente en ambos no táctiles y lo hizo un poco más delgado

kiddailey en 22 oct. 2015

👍2 🎉1 😄1

Estoy de acuerdo. Esta función es muy importante, de lo contrario, la lib es un poco inútil... especialmente en dispositivos táctiles más pequeños.
No es un caso muy especial, que una imagen tenga un ancho del 100 % en esos dispositivos y creo que todos los usuarios finales abandonarán la página en caso de ser capturados dentro de este contenedor panorámico de imágenes:\