Pinch and Zoom Image Resize

[Joe_H_3]

Hi guys. I am after some help.

I have made an app which I have launches on iOS, Play, Kindle and Windows. The app is a basically a reference app for lawyers looking for information. They tap buttons for the information they want and then the info pops up on screen. The info which pops up is a PDF converted to a JPG. I made the HTML5 side of it using a website creator called Incomedia Website X5. The code to open the popup is a standard feature on WebsiteX5 so I have not written it. The program calls it a Showbox Gallery.

This is a sample of the code from the HTML page:

<a href="#" onclick="return x5engine.imShowBox({ swipeImg: 'res/imSwipe.png', closeImg: 'res/imClose.png', loadingImg: 'res/imLoad.gif', effect: 'fade', background: '#000000', textColor: '#000000', boxColor: '#FFFFFF', startIndex: 0, loadingImg: 'res/imLoad.gif', closeImg: 'res/imClose.png', media:[{type: 'image', url: 'files/image-042.jpg', width: 764, height: 1080, description: ''}]}, 0, this);"><img id="imObjectImage_1" src="images/arson.png" title="Arson" alt="Arson" height="52" width="202" /></a></div></div>
     </div>
     <div style="float: left; width: 295px;">
      <div id="imCell_2" class="imGrid[0, 0]"><div id="imCellStyleGraphics_2"></div><div id="imCellStyle_2"><a href="#" onclick="return x5engine.imShowBox({ swipeImg: 'res/imSwipe.png', closeImg: 'res/imClose.png', loadingImg: 'res/imLoad.gif', effect: 'fade', background: '#000000', textColor: '#000000', boxColor: '#FFFFFF', startIndex: 0, loadingImg: 'res/imLoad.gif', closeImg: 'res/imClose.png', media:[{type: 'image', url: 'files/image-051.jpg', width: 764, height: 1080, description: ''}]}, 0, this);"><img id="imObjectImage_2" src="images/criminal_damage.png" title="Criminal Damage" alt="Criminal Damage" height="52" width="202" /></a>

As you can probably tell (at least I think this is right) it uses a JavaScript code called "x5engine.imShowBox" to open the file. The issue I have is this: when the page pops up, it renders more or less full screen but it cannot be zoomed in on at all. This isn't really a problem if you are reading it on an iPad or similar because it renders very well. The problem is that I could really do with adding pinch and zoom functionality to this and I have absolutely no idea where to start.

This is the contents of the x5engine.js file which appears to define the imShowBox function:

var _jq=$.noConflict(!0);try{window.$=window.jQuery=_jq}catch(Excp){}var x5engine={utils:{isOnline:function(){return window.top.location.href.substring(0,4)=="http"?!0:!1}},imShowBox:function(){return!1},imTip:{Show:function(e,t){return!1}}},swfobject=null;(function(e,t){"use strict";var n=function(){var e;e=["res/swfobject.js","res/x5engine.deferrable.js","res/l10n.js","res/x5cartengine.js","res/x5settings.js"];for(var n=0;n<e.length;n++){var r=document.createElement("script");r.src=(e.indexOf("http")!==0?t.settings.currentPath:"")+e,document.body.appendChild(r)}};e(document).ready(function(){typeof icm_lock_deferred=="undefined"?n():t.boot.run(),navigator.userAgent.match(/firefox/gi)&&e("head").append('<style type="text/css">button::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="reset"]::-moz-focus-inner { padding: 0 !important; border: 0 none !important; }</style>')})})(_jq,x5engine),function(e,t,n){"use strict";e.extend(t,{boot:function(){var t={},r=[],i=[],s=0,o=0;return{run:function(){var u=function(t,r){for(var i=0;i<t.length;i++)try{e.isFunction(t)?t():e.globalEval(t+";")}catch(s){"console"in n&&n.console.log("Error while executing bootup queue:\n\n"+t+'\nThrown exception: "'+s.message+'"')}t=[]};u(r);for(var a=s;a<=o;a++){var f=t;f&&u(f)}t={},u(i)},push:function(n,u,a){u=u||!1;if(a===null||a===undefined)a=5;isNaN(a)?a=="first"?(!u&&e.inArray(n,r)==-1||u)&&r.push(n):a=="last"&&(!u&&e.inArray(n,i)==-1||u)&&i.push(n):(o=Math.max(a,o),s=Math.min(a,s),t||(t=[]),(!u&&e.inArray(n,t)==-1||u)&&t.push(n))}}}()})}(_jq,x5engine,window),function(e,t){"use strict";e.extend(t,{cart:{loaded:!1,manager:null,ui:{showProductIcons:!0,iconSize:48,steps:{active:!1,font:{"font-family":"tahoma","font-size":"8.0pt","font-weight":"normal","font-style":"normal","text-decoration":"none",color:"black",activeColor:"black"},image:{url:"",width:0,height:0,steps...

Any help would be gratefully received.

Joe

[Dale_S_Intel]

Not sure, but I did find some references to enabling pinch zoom in Cordova  on Stack Overflow and other places, like this one:

https://cordovablogsblogs.wordpress.com/2015/06/04/enabling-viewport-pinch-zoom-in-phonegap-android-application-has-no-effect/

Unfortunately the suggested solution involves modifying some of the native (java) code in the plugin.  I would hope there's something easier, but you might give it a try.  You'd have to git clone the plugin to your local drive and then make the modifications, I think.  I haven't tried it myself, but it's worth a shot.

[Anusha_M_Intel1]

https://software.intel.com/en-us/xdk/faqs/cordova#pinch-and-zoom

The FAQ above has some information on pinch and zoom that might be useful.