Photoswipe Lightbox w/o gallery sections but added capt...

At a glance

I try to modify a Photoswipe snippet, kindly originally shared by @voytado, but I'm stuck. Anyone willing to help?

Changes
1) Photoswipe should not expect gallery sections, but just work on every image on the page.
2) The Lightbox should use this Caption extension: https://github.com/dimsemenov/photoswipe-dynamic-caption-plugin

As I have no experience with embedding 3rd party code, I asked ChatGPT for help. Photoswipe seems to load (but does not work), and according to devtools there seems to be an issue with that caption extension, here ChatGPT seems to have messed up.

Images have the class "img",
Content has the class "gallery"
Images have Alt-Text which can be shown show as a caption.

`<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.2/photoswipe.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.2/photoswipe-dynamic-caption-plugin.css">

Sample project:
https://p-54962e37-c530-4297-8102-211f840524e6.apps.webstudio.is/?authToken=0113317e-ceea-4678-8a4f-a49e9898ab60&mode=preview

Attachments

3 comments

OOleg Isonen

Hey, I just spent unreasonable amount of time making it work because the project docs are terrible, not sure you should use it but here we go:

https://p-09b98fe2-9eb2-40cb-ae4d-acc5e5d1e7f4.apps.webstudio.is/?authToken=7d38a4db-4253-48db-91e9-bc1338c94faf&mode=preview

https://photoswipe-with-caption-2dtog.wstd.io/

OOleg Isonen

2 caviats there:

anchor links to the image url that I copied from the published site, so its hardcoded and not guaranteed, will break any time you replace that image on the Image component

I didn't set the dimentions the library wants to be set in attribtues and I personally wouldn't want to hardcode the dimensions, but you can check if there is some value like auto or something else

HHolger

Oh 💩 – I had hoped that this would have been an easy fix. I'm sorry that this took you so long and with just partial result.

I just saw for the first time that you set the image optimization via parameters in the Link-Element you added. I wasn't aware of this option. And there seems to be a new "Optimize" checkbox in Image Settings, too.

The outcome still has an issue – there's a 403. But don't spend further work on this. It looks as if I should find a Lightbox that works better with Webstudio. Open for suggestions.

Attachment

Add a reply

Join the Webstudio community

Photoswipe Lightbox w/o gallery sections but added caption