I have a big graphic, originaly for print pages. I wonder if I can make a large png at example 2000 px on a Hype page. And that viewers can swipe the graphic around in the picture frame? What kind of function can I use?
you could use leaflet within Hype. this'll allow scale and pinchzoom ...
pure Hype would allow for drag and scaling ...
Please explain leaflet. I am not a programmer...
I think he means this… https://leafletjs.com …if you want to treat your large image like a map.
If you don't need zooming, you could use a technique that's shown in the “Spotlight” template…
Basically, the timeline can be controlled with drag events…
…so I made one timeline for “X” movement and another timeline for “Y” movement. This keeps the image from going beyond the bounds of the box, while allowing the viewer to move the image freely.
Maybe that helps. 
you've got a hypefile¿
No. But I have a png graphic I want to use.
leafletBigImage.hype.zip (15,3 KB)
the script is short, you can explore and adjust the settings ...
Note: keep filesize as small as possible! for really big images there's a possibilty of creating tiles of the image (like a real map) that is not really necessary in most cases
1 Like
You can also use
One sidenote: having images that are bigger than 2048 x 2048 pixels can break a page on mobile devices as the pics surpasses the graphic memory for mobile browsers. It used to be even less around 1024 by 1024 (older phones). There is a more sophisticated formula, but I memorize those dimensioned as a simple rule of thumb.
I would suggest to cut up the images into squares below that dimensions that is no problem most browsers also optimize for things outside of the viewport to be less process intensive in the paint cycle. If you don’t trust the browser to manage, hiding and displaying squares that are not visible, you can use something like intersection observer being part of Hype Action Events. But that step is totally optional.
1 Like