Google has now implemented a very unique pinch zoom for their images. The viewport meta tag does not allow user scaling or zooming, and as you would expect the resulting content is not pinch-zoomable on a mobile touch device. The image, however, is pinch zoomable. The image is the only part of the page that zooms, and the viewport scaling never changes. Does anyone know what javascript framework they are using to accomplish this? Is it publicly available?
I don't think their version is opensource, however this library is pretty nice:
https://openseadragon.github.io/
Not sure what google uses but there is a jQuery library that does this. It's called
panzoom
Related
I am developing an hybrid android app. I need to apply pinch zoom for a particular content section. The text size should be increased on pinch zoom. I tried many methods but all of them are suggesting with image zoom instead of text zoom. Can any one help me please.
That's not trivial. You can detect the pinch zoom state with jQuery.documentSize (which I have written). The plugin is plain JS, and despite the name, you can use it without jQuery, too.
But that's only half the solution. You need to listen to a "pinch zoom" event which unfortunately doesn't exist – at least on the web. And the "resize" event doesn't work for it. According to Peter Paul Koch ("The Mobile Web Handbook"),
... most browsers fire the resize event when the layout viewport is resized, but not when the visual viewport is resized (that is, the user zooms). This rule is not absolute, and to make things more complicated the several methods of resizing the layout or visual viewport may not all fire a resize event.
So unless you have access to an event in the Android app context which doesn't exist on the web, the only option seems to be polling, ie checking $.pinchZoomFactor() in regular intervals.
how do you implement pinch to zoom for a cordova android project
I have a iframe in which I am loading my src
and I want to implement pinch to zoom on the iframe because it is occupying the whole screen
To be precise you can achieve pinch to zoom in two ways
If you open the image in a native container which allows zoom and pinch - the performance is far better, here you might need a Cordova plugin which can do that for you, i found https://github.com/keensoft/FullScreenImage-Cordova-Plugin but i think it only opens up the image in full screen natively but doesnt allow pinch and zoom , you can try
If you dont use a plugin which means the image is shown inside the webview, for which you either write code for touch events or simply use hammer.js which allows this.
I'm developing an app with Phonegap for IOS. I would zoom and move an image contained in a box div (overflow hidden) with the finger: multitouch for zoom in and out and touchmove for move the image.
Is it possible? and how?
I'm looking with Google for the solution but I don't find it!
There are a couple ways to do it.
Probably the easiest way is to use iScroll4's pinch/zoom feature: http://cubiq.org/iscroll-4
You should check this tutorial about Multitouch and HTML/JS. It works with PhoneGap applications too. http://www.appliness.com/multitouch-with-hammer-js/
this one is a nice simple tutorial in using iscroll4 for image zooming:
http://iphonedevlog.wordpress.com/2013/07/03/adding-picture-zooming-to-your-phonegap-app-with-iscroll4/
helped me a bit in my phonegap app. now, if i could only figure out how to use it with an svg. hmmm..
So there seems very little around about this. I need to be able to detect pinching in the Android browser with Javascript. Not with use of a plugin (except jQuery). The only site I have seen this implemented is Google Maps.
Lets just say for now I want to be able to pinch inside of a div and it will log when I do so.
Struggling to find any examples.
Check hammer.js http://eightmedia.github.com/hammer.js/ it looks like transform gesture may do what you want.
On my website, which is loaded in the webview, there is a map. There are also java scripts that detects double tap for zoom, dragging etc. But is it possible to have a javascript that detects the use of pinch zoom ? there are several examples of it working on an iphone, and on my website there is a script for the pinch zoom but it is only working on iphone.....
Is it possible to get it to work on Android ?
Thanks
When you would like to scale web content in you WebView and enable pinch and zoom, I prefer the simple android way.
webView.getSettings().setBuiltInZoomControls(true);
and you can even hide the controls if you are using API 11 or higher
webView.getSettings().setDisplayZoomControls(false)
There's an open-source library called android-pinch that you can include in your project to enable pinch zoom if you switch your WebView to a WebImageView. Here's an example of usage...
// create the WebImageView object from xml
WebImageView img = (WebImageView) findViewById(R.id.main_pic);
// fetches the image in a background thread
img.setImageFromURL("http://www.mysite.com/mypicture.jpg");
// enable pinch-zoom abilities on the image
new PinchImageView(img);
It's not exactly in a webview, but in any layout, that I wrote a piece of code for detecting pinch in an Android view.
It took me days to find out a solution for this, so I made my own custom pinch gesture detector.
You can see it in Github: http://github.com/luisfer/Neckar
Hope it helps.
This excellent tutorial shows how to implement the Pinch gesture.