Panzoom: Scrollen durch Pandzoom-Inhalte

Erstellt am 5. Okt. 2015  ·  2Kommentare  ·  Quelle: timmywil/panzoom

Hallo,

Ich möchte scrollen, indem ich über den Pandzoom-Inhalt streiche.

In meinem Projekt hat das Bild eine Breite von 100% des Ansichtsfensters, und wenn sich mein Zoll auf dem Pandzoom-Bild befindet, wurde nichts hinzugefügt, logisch. Aber haben Sie einen Tipp, um das Scrollen trotz Pandzoom zuzulassen?

Beispiel: Wenn das Bild noch nicht gezoomt wurde? Wenn das Bild Zoom hat, aber das Bild durch die Grenzen des übergeordneten Containers blockiert wird? Wenn die Schriftrolle einen bestimmten Prozentsatz von unten nach oben darstellt?

Danke

Hilfreichster Kommentar

Ich brauchte dieses Verhalten auch. Es wäre schön, wenn es ein Flag "panOnlyWhenZoomed" gäbe, das Sie setzen könnten, damit Sie über Panzoom hinauswischen können, wenn Sie sich bereits in der minScale befinden, und das Schwenken nur beim Vergrößern aktivieren.

In der Zwischenzeit können Sie die Funktionalität ziemlich einfach vortäuschen, indem Sie überprüfen, ob der Panzoom über Ihren minScale-Wert hinaus skaliert wird, und den disablePan entsprechend einstellen. Ich habe dies auf iOS-Geräten und in einer Vielzahl von Chrome-Geräteemulatoren getestet und es scheint gut zu funktionieren:

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

Bearbeiten: Es wurde ein wenig optimiert, um in beiden ohne Berührung richtig zu funktionieren, und es etwas schlanker gemacht

Alle 2 Kommentare

Ich brauchte dieses Verhalten auch. Es wäre schön, wenn es ein Flag "panOnlyWhenZoomed" gäbe, das Sie setzen könnten, damit Sie über Panzoom hinauswischen können, wenn Sie sich bereits in der minScale befinden, und das Schwenken nur beim Vergrößern aktivieren.

In der Zwischenzeit können Sie die Funktionalität ziemlich einfach vortäuschen, indem Sie überprüfen, ob der Panzoom über Ihren minScale-Wert hinaus skaliert wird, und den disablePan entsprechend einstellen. Ich habe dies auf iOS-Geräten und in einer Vielzahl von Chrome-Geräteemulatoren getestet und es scheint gut zu funktionieren:

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

Bearbeiten: Es wurde ein wenig optimiert, um in beiden ohne Berührung richtig zu funktionieren, und es etwas schlanker gemacht

Ich stimme zu. Diese Funktion ist sehr wichtig, sonst ist die Lib irgendwie unbrauchbar.. vor allem auf kleineren Touchgeräten.
Es ist kein besonderer Fall, dass ein Bild auf diesen Geräten eine Breite von 100 % hat, und ich denke, jeder Endbenutzer wird die Seite verlassen, wenn er in diesem Bildschwenkcontainer erfasst wird:\

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen