JQuery Mobile Pinch-Zoom-Bild Nur

Ich habe einen JQM-Anwendung, die ich möchte zeigen einige Bilder. Die Bilder, die derzeit in Ihrer eigenen iframe, so dass Sie kann gescrollt werden separat von der app.

Ich würde gerne in der Lage, pinch-zoom-nur die Bilder, die in den iframe als auch.

Merke ich, wenn ich passen Sie die folgenden code-snippet, dass ich es ermöglichen kann, pinch-zoom, aber dies ermöglichte es, die für die gesamte Anwendung. 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

Durch entfernen der maximum-scale, pinch-zoom gibt aber für alles.

Gibt es eine Möglichkeit zum aktivieren der zwei-Finger-zoom nur für ein Bild? Wie über das hinzufügen einer neuen viewport-tag auf der iframe, würde das funktionieren, wenn das überhaupt möglich ist?

UPDATE

  • Injiziert HTML-Code in den iframe. Hinzugefügt meta-tag, das hat nicht geholfen.

  • Versucht .extend($.mobile.zoom, {locked:false,enabled:true}); auf der iframe-Körper, machte dies nichts.

InformationsquelleAutor Halsafar | 2012-05-27
  1. 5

    können Sie dies tun auf das Bild:

    var image=document.getElementById('imageId');

image.addEventListener('gesturechange',function(e){

    if(e.scale>1){
        //zoom in 
        //increase the size of image according to the e.scale
    }

    else if(e.scale<1){
        //zoom out 
        //decrease the size of image according to the e.scale
    }
});
    • Genau das, was benötigt wird!
    InformationsquelleAutor Sujan Shrestha
  2. 1

    Als (hack) Abhilfe, vielleicht können Sie erkennen, Wann der Benutzer ist das ausführen einer Prise Geste, dann Zoomen Sie das Bild mit einem CSS transform.

    • Blick in diese Methode.
    InformationsquelleAutor Jeffery To
  3. 0

    Es stellt sich heraus, der beste Weg, dies zu tun, ist die Verwendung der ChildBrowser plugin. Dieses auf IOS und Android funktioniert perfekt für Bilder.

    IOS Childbrowser:

     https://github.com/purplecabbage/phonegap-plugins/tree/master/iPhone/ChildBrowser

    Android ChildBrowser:

     https://github.com/phonegap/phonegap-plugins/tree/master/Android/ChildBrowser

    Dann, nachdem Sie alles getan haben, das setup-Sie können Sie öffnen, URLs oder lokalen Dateien wie dieses:

     window.plugins.childBrowser.onLocationChange(location);

    Tun, beachten Sie, dass in einem vollständig cross-Plattform-setup zwischen IOS und Android, die Sie beide benötigen verschiedene Versionen des plugins. IOS erfordert ChildBrowser init in onDeviceReady, Android nicht.

    InformationsquelleAutor Halsafar
  4. 0

    Würden einige Art von widget zu vergrößern/verkleinern der Bild-in-Place-arbeiten?
    zB:
    http://0.s3.envato.com/files/78471334/index.html


    https://github.com/timmywil/jquery.panzoom

    • Ich habe test. Ich habe nicht gesagt, es frei, ich war der Annahme, Entwickler können den code an. Sorry, es passt nicht zu Ihrem Geschmack, boss :v
    • Einverstanden, wir brauchen mehr Menschen wie Sie, die sehr gut ausgebildet sind.
    • Ja genau...
    InformationsquelleAutor HoaPhan
Schreibe einen Kommentar