How to scroll Zoom & Drag Pan

Sean Elias shared this question 6 years ago
Answered

How can I set up the following:


scroll to zoom &


Drag navigate an image 'I assume' inside a Dynamic panel (With Boundaries so you cannot lose the image)


--Above two examples can be viewed via the Google maps navigation--


So scroll to Zoom & Click and Drag to view the document/Image in a specific area.

Comments (9)

photo
1

Well... there's a way to do the drag - navigate but is really tricky. Here are two examples for that and the zoom:


http://d2ld3he4yll0xl.cloudfront.net/...


http://d2ld3he4yll0xl.cloudfront.net/...


The click and drag example (first one) has two panels, one inside the other. One has the image inside and is way bigger than the image. The image has a drag event that moves it when you drag it. That panel is inside another smaller panel that defines the area that is going to be shown about the image.


The zoom is just a change style action on the image that changes the size of that image.


I hope that helps you.

photo
1

It will do thank you :)

photo
1

Hi Victor


I want to add the zoom and pan feature for a mobile prototype (iPhone5) and the images that I would be using are those of maps, just like we see maps in Google Maps. I want to simulate the same feature with this prototype, could you please suggest how it can be done efficiently with Justinmind Protyper (Professional edition)? I looked at the above examples but couldn't understand how the different panels (layered in the dynamic panel) show different images on clicking the '+' button.

photo
1

Here are some tutorials that can help you understand the examples above:


http://www.justinmind.com/usernote/te...


http://www.justinmind.com/prototyper/...


On the second example, zooming.vp, Victor created a panel with 4 dynamic panels. On each of these panels, there is an image and '+' and '-' buttons. One is the default image and the other three are the zoom states of the image. The '+' and '-' buttons are set to change panels when clicked.

photo
1

Thanks John! I could implement dynamic panels for the zooming feature, however, I am still confused with the concept of scrollbars. I referred to the following link for dding scrollbars:


http://www.justinmind.com/usernote/te...


However, I couldn't implement the scrolling feature by adding a larger image on a smaller panel for a mobile prototype. Could you please elaborate this further and give more examples?

photo
1

The example on the link above is a good one.


If your image is larger than your panel, here is what you should do.


1. resize your dynamic panel so that it is big enough to contain all the components


2. place all the components inside


3. resize your dynamic panel. Make it smaller.


NOTE: on dynamic panel's Properties, set Vertical Scroll and Horizontal Scroll to Always Visible.

photo
1

Thanks John for the reply! I set the Vertical and Horizontal scroll to "Always visible" in Dynamic Panel's properties, however I am still unable to scroll the image when I simulate the prototype. Could you please suggest a solution for this? On simulation, I use the one finger gesture tool to scroll the image.

photo
1

OK, can you please send your .vp file to jim.support@justinmind.com?

photo
1

Please add gesture zooming