V5-Beta: How to embed a PhotoSwipe light box in a web-page?

dimsemenov / PhotoSwipe

JavaScript image gallery for mobile and desktop, modular, framework independent

http://photoswipe.com

MIT License

24.18k stars 3.31k forks source link

V5-Beta: How to embed a PhotoSwipe light box in a web-page? #1832

Open acwolff opened 3 years ago

acwolff commented 3 years ago

You can use of course an iframe to embed a PhotoSwipe light box in a web-page, but I wonder is there a better way to do that?

With the fancyBox gallery I can do that in an elegant way via a fancybox-placeholder as you can see in this example page.

Is there a similar solution for the PhotoSwipe light box?

dimsemenov commented 3 years ago

Inline embed isn't supported, yet, here is why:

if you just embed PhotoSwipe - it'll block vertical browser scroll on mobile, so the user might get trapped. The same may happen during zoom gesture. This happens with your example page as well, so you can see why. Both problems are solvable, but require a significant amount of development time.
PhotoSwipe is a pretty large library (which is why it loads itself on demand and not on pageload), and using it as a simple inline gallery is overkill. I generally recommend using a much lighter alternative (such as CSS-based overflow-x scroller) if you need "inline" gallery.
Accessibility, it'll never be as good as a simple grid of thumbnails with alt's that link to the large image.

acwolff commented 3 years ago

Inline embed isn't supported, yet, here is why:

if you just embed PhotoSwipe - it'll block vertical browser scroll on mobile, so the user might get trapped. The same may happen during zoom gesture. This happens with your example page as well, so you can see why. Both problems are solvable, but require a significant amount of development time.

May be I don't understand your points, but I see in my example page no problems with vertical scrolling on my iPad and I see there also no problems with zooming gestures.

But anyhow thanks for your comment and making a feature request of it.

dimsemenov commented 3 years ago

@acwolff I'm referring to the gallery blocking the page scroll, so if the gallery occupies most of the viewport - there is no way to scroll.

acwolff commented 3 years ago

@dimsemenov In this webpage the gallery takes 80% of the viewport, but scrolling is no problem, so I still don't know which problem you see!

With the PhotoSwipe gallery I can do that now only with an iframe as you can see here, but this is not a nice responsive solution!