I would like open image after tap and let user to zoom the image. Is there some pinch-to-zoom functionality in AppGyver?
1 Like
I think the only option we would currently have for this would be opening the image in a Webview, since zooming works there 
So you could have another page you would open and within it, display the image in a WebView.
Mevi, hello!
You could give an example or video tutorial or at least screenshots of how to do it. I searched everything that you mean on webview and could not find it - and the question of the ability to change the size of the picture by viewing the image on the smartphone screen ( Pinch open to zoom in) is very important for my application.
Hi! I have no idea if this actually works, as I was only providing ideas in regards to what to try to get this to work. I don’t think we have any tutorial material on it either, which is why I didn’t link any.
However, it might be that even if the WebView suggestion works, it’s not what you need. I think a separate image viewer component would be cool to have, which would become available once we have third party plugin support, hopefully in Q1/21.
Mevi, thank you.
Please add this question to your pending update. And notify how such a decision will be, please.
In the meantime, you can just make it clear how to use the webview and how to activate and use it.
Hi,
i test a bit around it and i got it working virtually. The only way i found already was the WebView Component.
Here’s a video from my phone how it would look like.
Credits: The image in video is from Pixabay.com
I used the webview component for this, so it wouldn’t work on web.
What i’ve done:
-
Firstly i set the “image zoom” page (it’s only the name of the page) padding to 0 and disabled scroll and enabled stretch to the viewport height.
-
Now i add three page variables. The first one (image) could be replaced by your images sources. (I used this because I were not able to get the image components source directly to the zoom variable.)
Then i created the zoom variable that is later set with your image source. And at last i created a variable called visible. It’s for toggeling the visibility of the container which shows the weview with the image to zoom.
-
Then i add a image to show the image that later will be able to be zoomed. (In your case maybe you will have a gallery with more than one images, but for tutorial it’s enough to have one)
-
Next i add a button that now set
pageVars.zoomto the images source (in my case i set it topageVars.image) at it’s logic. And i add also a Set Page Variable function withpageVars.visibleas Variable name and it’s Assigned value to true so the zoom Container will be shown.
Where your’re placing this button doesn’t matter. I only placed it there because i thought it looks better.
-
At least part i add the “Zoom Container”. In this one i place the webview component that shows the clicked image and make it zoomable. I set the width of the container to
systemVars.dimensions.viewport.widthand it’s height tosystemVars.dimensions.window.heightand made it’s background grey with a bit of transparency. Also i set it to absolute and it’s Z-index at Dimension and Position \ Position higher than at others. E.g. at mine it’s 5. So the container is on top of the other components and they are not clickable while it’s shown. Also it looks a bit like a full page popup. Then i set it’s Visibility (At properties \ Advanced) to ourpageVars.visible.
-
Into this container i put the WebView Component. I didn’t change anything there except the HTML content Part. I set this to formula. But you can experiment a bit with the height and width of it. Didn’t try much there.
"<img src=\"" + pageVars.zoom + "\">"
This formula has to be set into""because it’s html and not editors language.<img src="Url">is to show the image.\"is same as", but in editor i need this at this place because more of""result as an error in editor. Then i replace the Url part of the html formula with our image source. And because i set the current images source topageVars.zoomi will choose this as our Url. So later we can easily replace the Url inpageVars.zoomwith other sources so other images can be displayed and zoomed.
-
At last i add a close button at the top of the container to “close” the zoomable view. For that i set it’s logic part to Set Page Variable and set it’s Variable name to
pageVars.visibleand it’s Assigned value to false. So now the container will get invisible.
So i’m sorry for my english and for maybe some other failures in explanation. I’m also a no coder with no programming experience. It’s only that things here i found out and get to work.
I hope it will help you to solve your issue. If there are any further questions, ask. I will try to help.
2 Likes
Hello! Thanks, It’s sounds cool! But nothing not work at me. Please can add illustration all steps of screens, but your description is not of all understand for me. Tnanks a lot
Hi. Now i added a picture of everything i’ve done. Hope this make it more clear.
2 Likes
Hi! I try to repeat all your manipulations, but work only Buttons.
Problems next:
- What is you input to Block “Image”? Please give screenshot Properties.
- What is first set to variable “image”? But if I click Button Zoom Variable “zoom” must set of Variable “image” - but what is include of this variable at first?
- I view that block WebView I install is not correct - where I have a mistake?
- And result it is - It’s terrible
Hello,
One more question:
How can install width and height of WebView as like Container or full screen, and how change size of image, that I want get to formula “<img src=”" + pageVars.zoom + “”>"?
Sry i’m answering so late.
I have the same issue with component tap that it does not work at other components than buttons. @Mevi
- Only the image source. If you want to build e.g. a image gallery, you will repeat this component with a data resource. Fully normally like if you don’t have a zoomable view. (Mine wouldn’t help you there, because i only defined a non variable value at a page Variable. - because of that i have no screenshot attached)
- the variable “image” is my image source. This also e.g. could be a data variable or sth. else.
- There you have to play a bit with the position. At dimension and position - position i set Top position to
(systemVars.dimensions.window.height/2)-200. But there you have to play a bit with the 200 at the end of this code.
How can install width and height of WebView as like Container or full screen, and how change size of image, that I want get to formula “<img src=”" + pageVars.zoom + “”>"?
So for full screen you can change the height and width to systemVars.dimensions.window.height systemVars.dimensions.window.width. This maybe should work, but i didn’t test.
I don’t know how to change the images size. And don’t know if this is possible. There i can’t help 
I hope this wil help you a bit.
Wait what, component tap not working on other components than buttons? 
I tested quickly on containers and component tap was working, is there something more specific that isn’t working for you?
I specificaly had this problem with icons. So component tap does not work with icons.
“had”? Is it solved for you now, or still occurring?
1 Like
It’s still occurring. Sorry for my bad English.
Hmm… I tested with a simple alert from icon’s component tap and it was working Can you try that in the same place, then on a different place on the page, then on another page, until you find a scenario where it works, etc. so you could find more specifically what situation it is where the icon tap doesn’t work?
Don’t know why, but now it works. Maybe it was a temporarely problem.
But i’ll let you know if it will be back…
1 Like
Hi, I’m trying to do this, but I can’t see the image when I click at the bottom, the window opens, but it appears completely white. What can I be doing wrong?
Hi! Are you still stuck with this? Can you share some screenshots of your setup?
