2012-05-27 8 views
8

Mam działającą aplikację JQM, w której chciałbym wyświetlać niektóre obrazy. Obrazy obecnie znajdują się w ich elemencie iframe, dzięki czemu można je przewijać oddzielnie od aplikacji.JQuery Mobile Pinch Powiększ obrazek Tylko

Chciałbym móc powiększać również tylko obrazy w elemencie iframe.

Zdaję sobie sprawę, że dostosowuję poniższy fragment kodu, który umożliwi włączenie zoomu szczypcami, ale włącza to dla całej aplikacji.

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

Po usunięciu maksymalnego powiększenia w przybliżeniu wraca, ale do wszystkiego.

Czy istnieje sposób włączenia zoomu szczypta tylko dla obrazu? Co powiesz na dodanie nowego tagu rzutni do elementu iframe, czy to działałoby, jeśli jest to możliwe?

UPDATE

  • odlewania HTML do iframe. Dodano metatag, to nie pomogło.

  • Wypróbowany .extend ($. Mobile.zoom, {zablokowany: fałsz, włączony: true}); na ciele iframe, to nic nie znaczyło.

Odpowiedz

1

Okazuje się, że najlepszym sposobem na to jest użycie wtyczki ChildBrowser. To na IOS i Androida działa idealnie na obrazy.

IOS Childbrowser:

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

Android ChildBrowser:

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

Następnie Po dokonaniu wszystkich ustawień można otworzyć URL lub plików lokalnych tak:

window.plugins.childBrowser.onLocationChange(location); 

Do Zauważ, że w konfiguracji z pełną platformą między IOS i Androidem oba muszą mieć inną wersję ns wtyczki. IOS wymaga inicjacji ChildBrowser w onDeviceReady, a Android nie.

+0

URL Github już nie działa: https://github.com/alunny/ChildBrowser – siniradam

1

Jako obejście (technikę), być może można wykryć, gdy użytkownik wykonuje szczyptę gesture, następnie powiększać obraz za pomocą CSS transform.

+0

Patrząc w tej metodzie. – Halsafar

4

można to zrobić na obrazek:

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 
    } 
}); 
+0

Dokładnie to, co jest potrzebne! – borodatych