How to make an image scrollable when the image container is greater than the project size?

1

I created a simple project with a picture of a fly and two buttons which zoom in and out of the image. Now, I want to be also able to pan around (look around) the image when it’s zoomed in. I added an action which controls the image position on drag and it works when the image is zoomed in. When it isn’t there are white gaps appearing around the image when it’s repositioned.

Is there any way to make an image scrollable, just like a text box can be when it’s contents go beyond the textbook container but stop when the edges of the image touch the edge of the document?

Feel free to have a look at the attached example. Maybe you know a better way of doing this.

Hoverfly.hype.zip (2.6 MB)

Thanks for your help.

Greg

2

You might need jQuery to achieve that...

http://www.pureexample.com/jquery-ui/draggable-containment.html

Or can you make your picture larger than the Scene Height/Width so that you can only drag it so far?

1 Like
3

Thanks a lot Greg. I’ll give JQuery a try. How do I put all this together in Hype though? Do I put the links to jQuery and CSS rules in the head of my hype project and then the HTML into the inner html of the box? Where does the JS itself go?

Thanks for your help.

Greg

4

I think you can simply drag and drop the jQuery libraries into the "Resources" pane in Hype. Hype will add the links in the HTML Head automatically. It is important to add the libraries in the right order e.g.., add jQuery 3.X.X, then add JQueryUI, then the other libraries.

You can get some more info and example files in this thread...

http://forums.tumult.com/t/physics-jquery-ui-draggable-elements/1341

also see...

http://forums.tumult.com/search?q=jquery%20containment