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

issues with custom data sources and webp #2005

Closed JoshBauguss closed 1 year ago

JoshBauguss commented 1 year ago

I've been trying to implement photoswipe on a site that already uses picture elements. So I had to use the dataSource option and some custom code to build a data source out of the existing list of picture elements. I then implemented the webp code from the documentation so that the lightbox utilized responsive image sets.

I'm having a problem though. When opening the lightbox, the second image viewed (via prev or next) is missing its style="width:x; height:y;" settings. image gets displayed unconstrained and breaks the bounds of the lightbox.

Click an image here https://devsite.santafedrygoods.com/product/alonpi-cashmere-degrade-puka-poncho-with-leather-trim-in-black-brown/

once you cycle thru all the images however, the image shows up fine. Can't figure out why this would be happening.

here is my code to build the options and init photoswipe

``

JoshBauguss commented 1 year ago

here is a screenshot as I see the image of the first instance of "next image" on my mac and my pc. a coworkers computer showed the second image much smaller but still a little larger than the rest of the images.

and I can see in the inspector <img class="pswp__img" src="/images_products/pl/42858_209841_pl.jpg" alt="" srcset="/images_products/pl/42858_209841_pl.jpg 1400w" width="1510" height="2170">

that its missing the style=""

for whatever reason, the first usage of next/prev shows the next/prev image without the style=. loop thru and it is suddenly totally fine.

image

JoshBauguss commented 1 year ago

i've decided to take a different tactic and just show webp as normal images instead of picture elements, reverting to jpg if JS identifies iOS < version 14. Hopefully a code maintainer will see this and see that the picture demo code via the documentation is broken. For starters, the issue i had above with images not getting their style=width,height settings added. second, when you loop thru images, it stops utilizing the picture element and reverts back to the standard img tag usage. I didn't report this second issue until now as it was a later discovery.

thomasnavarro commented 1 year ago

Hi ! I've created a PR to fix the documentation, if it helps, try changing the name of your events (look at #2024)

Thomas