[saravanan]

Hi,
I am developing an app in which i need to achieve pinch and zoom for images . Since i am new to mobile apps development , can anybody help with this problem.

[support-octavio]

Hi saravanan,

We have no plans to support general pinch-zoom across any screen as it will dork up the layout engine. It is fairly common among mobile ui frameworks to disable scaling across the app, e.g., mobione, jquery mobile, jqtouch, sencha …. all do this. We are investigating pinch-zoom for images only but have not committed to it at this time. Please share how you would like zoom to work in your project(s).

[saravanan]

Hi,
Actually in my application, we provide a image in the last column of a table. when the user clicks on the image , the image should enlarge so that the user can see the image clearly.This is my requirement.
Can i get suggestions on this requirement.

[Stu Wade]

Hi,

Might I suggest a workaround for your problem …

If the small image is made clickable you can use the on click to transit to a page containing a larger image and a back button.

[Rathinavel]

Hi Saravanan,

As Stu Wade said, there can be an image placed at the onClick event and redirect to another page

where the actual image is placed.

and my solution for the same would be

Instead of making the screen to be pinch and zoom (you need to add heavy files for supporting this),

you can just add the image inside a panel and add the css property for that panel as below:

overflow-x: scroll;
    overflow-y: scroll;

these two lines should solve your problem. 🙂

Please Let me know how this works.

Cheers..!

[steven168h]

@Rathinavel wrote:

Hi Saravanan,

As Stu Wade said, there can be an image placed at the onClick event and redirect to another page

where the actual image is placed.

and my solution for the same would be

Instead of making the screen to be pinch and zoom (you need to add heavy files for supporting this),

you can just add the image inside a panel and add the css property for that panel as below:

overflow-x: scroll;
    overflow-y: scroll;

these two lines should solve your problem. 🙂

Please Let me know how this works.

Cheers..!

you means add the code into the filename.www > filename.css, right?

[Rathinavel]

HI Steven,

you can use a separate css file and start to add those lines under the panel id.

[paulD]

Hey Rathinavel,

Just a quick question with this method. How do you get the image to be larger than the panel? Any chance you could do a very quick demo?

Thanks

Paul

[Rathinavel]

hi Paul,

I will post a demo of it in coming days…

right now little bit busy with my daily routine 😉

but surely i will post a demo of it asap… 🙂 its on my list of experiments to be done 😉

[Rathinavel]

Hi Paul,

please see the attached which has the scroll bars 🙂

please let me know know any innovations 🙂

Attachments:

You must be logged in to view attached files.

[paulD]

Vel,

Thanks for taking the time out to do this. I now understand! I couldn’t figure out how to make the image larger than the panel.

By setting the css height and width and using the css overflow y and y it works!

in the words of Homer Simpson DOH…….

one day i’m going to get this html css stuff down………. maybe

Thanks again

Paul

[paulD]

Ok, i can’t get this to work on a device as a web app. i’ve tried IPAD and Galaxy s3

not tried as a native app but it works in the test centre? No scroll bars appear?

Paul

[Rathinavel]

Hi Paul,

from your reply, I understood that you tried something with the shared example.

I don’t have any devices(iPhone or iPad) to test the apps. 🙁

That’s one of the drawbacks from my side. 🙁

might be some one like @Cincyplanet, Stu, Support-Wayne, Support-Octavio who work with real time application can lend their hands to help us :).

[Author]

Posts