Panzoom: Faire défiler le contenu de pandzoom

Créé le 5 oct. 2015 · 2Commentaires · Source: timmywil/panzoom

Bonjour,

Je voudrais faire défiler en balayant le contenu du pandzoom.

Dans mon projet, l'image a une largeur : 100 % de la fenêtre d'affichage, et lorsque mon pouce est sur l'image pandzoom, rien ne s'est ajouté, logique. Mais avez-vous une astuce pour autoriser le scroll malgré pandzoom ?

Exemple : Quand l'image n'a pas encore zoomé ? lorsque l'image a un zoom mais que l'image est bloquée par les limites du conteneur parent ? Quand le scroll représente un certain pourcentage de bas en haut ?

Merci

Source

ShakurOo

Commentaire le plus utile

J'avais aussi besoin de ce comportement. Ce serait bien s'il y avait un indicateur "panOnlyWhenZoomed" que vous pourriez définir qui vous permettrait de passer devant le panzoom lorsque vous êtes déjà à l'échelle minScale et d'activer uniquement le panoramique lors d'un zoom avant.

En attendant, vous pouvez simuler la fonctionnalité assez facilement en vérifiant si le panzoom est mis à l'échelle au-delà de votre valeur minScale et en définissant le disablePan en conséquence. J'ai testé cela sur des appareils iOS et dans une variété d'émulateurs d'appareils Chrome et cela semble bien fonctionner :

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

Éditer : l'a légèrement modifié pour qu'il fonctionne correctement à la fois en mode non tactile et l'a rendu un peu plus mince

kiddailey le 22 oct. 2015

👍2 🎉1 😄1

Tous les 2 commentaires

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

Éditer : l'a légèrement modifié pour qu'il fonctionne correctement à la fois en mode non tactile et l'a rendu un peu plus mince

kiddailey le 22 oct. 2015

👍2 🎉1 😄1

Je suis d'accord. Cette fonction est très importante, sinon la bibliothèque est un peu inutile .. surtout sur les petits appareils tactiles.
Ce n'est pas un cas très particulier, qu'une image ait une largeur de 100 % sur ces appareils et je pense que chaque utilisateur final quittera la page en cas de capture à l'intérieur de ce conteneur de panoramique d'image :\