2017-10-06 2 views
2

Ich baue eine Chat-Anwendung mit Meteor für Android. Ich habe "Add Image" -Option mit Cordova Kamera-Plugin enthalten. Jetzt, nachdem das Bild hochgeladen wurde und von den Benutzern gesehen wurde, möchte ich darauf klicken und es vergrößern. Wie geht es weiter?Bild vergrößern Meteor android cordova

Hier ist mein Bild-Rendering-Code:

<div class="message"> 
    <img src="{{t.img}}" 
     data-action="zoom" 
     class="showImage" 
    > 
</div> 

Ich habe versucht, das inno:zoom Paket verwenden, aber war nicht erfolgreich. Irgendwelche Einsichten?

im HTML-Kopf, habe ich folgenden Code:

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1"> 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 

Antwort

1

I wie Hammerjs mit einer Touch-Bibliothek würde vorschlagen: http://hammerjs.github.io/

Es gibt eine Menge Möglichkeiten, mit Touch zu arbeiten in JavaScript, aber sie können schwierig sein, wenn Sie nicht mit ihnen erfahren sind.

Möglicherweise müssen Sie das hochgeladene Bild in eine eigene Vorlage einfügen und reaktive Variablen verwenden, um das Bildelement neu zu initialisieren, um die Zoomfunktion zu aktivieren. Dies gilt wahrscheinlich auch für das Paket, das Sie bereits ausprobiert haben.

Wenn Sie mehr Code-Beispiele teilen könnten, könnte ich (oder andere) eine spezifischere Antwort geben.

+0

Danke für die Antwort. Ich werde jetzt versuchen, das Bild in eine eigene Vorlage hochzuladen. Die Frage aktualisieren und mehr Code anzeigen – user3807691

+0

Okay, ich benutze jetzt eine neue Vorlage, um nur das Bild anzuzeigen. habe das inno-Paket auch angewendet, aber es ist immer noch nicht zoombar – user3807691

+0

Dies könnte ein wildes Haar sein, aber was ist, wenn Sie die Breite des ''-Elements von 100% auf 50% verringern? Wenn man in inno: zooms Quellcode nachschaut, sieht es so aus, als würde die Zoom-Funktion zurückkehren, wenn das Element breiter ist als (100vw-80px * 2). https://github.com/spinningarrow/zoom-vanilla.js/blob/gh-pages/js/zoom-vanilla.js –