image zoom in meteor android cordova

Question

I am building a chat application using Meteor for Android. I have included "Add Image" option using cordova camera plugin. Now, after the image is uploaded and is seen by the users, I want to click on it and zoom it. How to proceed?

Here's my image rendering code :

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

I've tried using the inno:zoom package but was unsuccessful. Any insights?

In the html head, i have the following 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">

Answer 1

I’d suggest using a touch library such as Hammerjs: http://hammerjs.github.io/

There are a lot of ways to work with touch in JavaScript, but they can be difficult if you aren’t experienced with them.

You may have to put the uploaded image in its own template and use reactive variables to re-initialize the image element in order to enact the zoom feature. This is likely also true of the package you already tried.

If you could share more code samples, I (or others) might be able to give a more specific answer.