search

philgyford / daily-paper

For viewing a daily issue of the Guardian and Observer newspapers. `main` branch should be stable, current work is in `dev` branch.
https://guardian.gyford.com/
Other
26 stars 5 forks source link

Enable zooming images #43

Open philgyford opened 11 months ago

philgyford commented 11 months ago

Would be good to be able to click/tap an image and have it zoom to be as wide/tall as the viewport allows. Maybe disable on small screens? Or allow zooming in further.

https://github.com/kingdido999/zooming is nice because it does one thing. Doesn't create a "Lightbox" in which you can scroll through several images.

But it doesn't work for us because of the overflow:hidden on #window. The image zooms, but only within the confines of the central article "window". I tried disabling/enabling the overflow when an image opens/closes using onBeforeOpen() and onClose() callbacks… which seemed to work, but closing an image resulted in it bouncing open again, except this time with the overflow in place.

Maybe we can look at how that plugin does things and create our own simplified version that works for our one use case.

I think we can target all img.gu-image images to get the ones in the body of articles. Could do the same for the "thumbnail" images, but note that they're only 500px instead of 1000px. Looks like you can change the 500.jpg filename to 1000.jpg for them and get the big version though.

philgyford commented 11 months ago

Also tried https://github.com/spinningarrow/zoom-vanilla.js which is promising, but for some reason the zoomed image is given strange proportions.