jQuery mobile/JavaScript image pinch-zoom für android und iPad

Habe ich die Suche für eine unkomplizierte Lösung, wie ein Bild (png) kann ein-und ausgezoomt werden, ohne den rest der website, aber keine gefunden.

Haben alle von Euch verwendet solch ein tool oder kennt einen Weg, dies zu tun mit jQuery oder javascript? Ich bin sehr neu in jQuery, also nicht wissen, was Ereignisse, die ich anschauen sollte. Diese Funktionalität sollte auf beiden android-tablets und iPad.

Sah JQuery Mobile Pinch-Zoom-Bild Nur und die links zur Verfügung gestellt, aber anscheinend sind diejenigen, für die diejenigen, die mithilfe von PhoneGap.

Vielen Dank für jede Hilfe.

stackoverflow.com/questions/12356116/... funktioniert teilweise. Während das Bild zoomt in und out ganz gut, Sie kann sich nicht bewegen um innerhalb des div zu sehen, die andere Teile des Bildes. Nach dem Zoomen das Bild, die Benutzer werden erwarten, gehen Sie zum anderen Ende des Bildes, indem Sie die Finger auf dem vergrößerten Bild. Das funktioniert nicht.

InformationsquelleAutor WhatsInAName | 2012-10-10

  1. 5

    Habe ich keine Lösung finden, so habe ich es umgesetzt habe (mit Vanille-JS und Leinwand, sondern tragbare, css3) : https://github.com/rombdn/img-touch-canvas

    Beispiel : http://www.rombdn.com/img-touch-canvas/demo (besser mit einem touch-Gerät, aber funktioniert am desktop mit +/- und-ziehen per Maus)

    <html>
<body>
    <div style="width: your_image_width; height: your_image_height">
        <canvas id="mycanvas" style="width: 100%; height: 100%"></canvas>
    </div>

    <script src="img-touch-canvas.js"></script>
    <script>
        var gesturableImg = new ImgTouchCanvas({
            canvas: document.getElementById('mycanvas'),
            path: "your image url"
        });
    </script>
</body>
</html>
    Genial! Dein code ist genau das was ich brauche! Danke!
    Cool aber funktioniert nicht unter WP7.5/IE9

    InformationsquelleAutor rombdn

  2. 0

    Ich würde das Bild in ein "viewport" Schicht verwendet, um den Fluss von Ihrer Seite. Der "viewport" - element, es ist overflow CSS-Eigenschaft festgelegt hidden um dieses Ziel zu erreichen.

    Dann können Sie JavaScript verwenden, um zu erkennen, mehrere berührt und dann skalieren Sie das Bild als notwendig. Ich habe noch die Verwendung dieses frameworks ist, aber es scheint sehr cool und könnte dazu beitragen, dass diese leichter auf Sie: https://github.com/HotStudio/touchy

    Können Sie erkennen auch mehrere berührt, ohne einen Rahmen, indem Sie die event.touches array in ein Ereignis-handler für touchmove. Für jede Note, die gleichzeitig wird es einen anderen index in der event.touches array.

    Mit Touchy scheint ziemlich einfach (ungetestet):

    var handleTouchyPinch = function (e, $target, data) {
    $target.css({'webkitTransform':'scale(' + data.scale + ',' + data.scale + ')'});
};
$('#my_div').bind('touchy-pinch', handleTouchyPinch);
    Ich bin versucht, empfindlich wie du vorgeschlagen hast, aber es nicht schaffen noch arbeiten. Auch, was ist ein "viewport" - Schicht? Ich bin mit viewport meta im header so: <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=0" />. Können Sie mir ein Beispiel nennen?
    Im Allgemeinen eine "viewport" ist die box, durch die Sie schauen, um etwas zu sehen. Im Zusammenhang mit dieser Frage, es heißt, Sie erstellen eine <div> (oder ähnliche) element enthält Ihr Bild. Sie setzen das "viewport" element, um die Dimensionen, die Sie wollen das Bild zu nehmen, auf die Seite. Jetzt können Sie skalieren und verschieben das Bild herum, ohne messing mit layout der Seite, weil das Bild nicht direkt auf die Seite layout nicht mehr. <div style="width:100px; height:100px; overflow:hidden;"><img src="..." /></div>

    InformationsquelleAutor Jasper

Schreibe einen Kommentar