Photoswipe is not working properly if AJAX is enabled in a View

Same problem here with views infinite scrolling. After more views rows loaded, Photoswipe opens correctly, but if you close it the large image is still visible, while the black container and the controls are hidden.

In this moment we have the following classes on the .pswp wrapper: "pswp pswp--supports-fs pswp--open pswp--notouch pswp--css_animation pswp--svg pswp--animated-in pswp--visible"

Same issue here. Would love to get it resolved... has anyone gained traction on this fix?

Please test the latest dev.
Also try #2974440: Remove the hard coded .photoswipe-gallery class.

Please retry with 8.x-2.x branch.

Hi @Anybody — thanks so much for your work on this great module. I would like to revisit this issue, as I am finding that in both latest 8.x-2 dev and 8.x-2.9 releases, any Ajax call causes the Photoswipe functionality to break.

My configuration:
-Views block (any format that I have tried, including Unformatted)
-Node image fields displayed with Photoswipe formatter
-Exposed filters to allow users to narrow the selection
-Ajax: On
-When page loads, Photoswipe works as expect, but if any exposed filters are changed and make an Ajax call, the Photoswipe functionality stops working and links take user straight to the image file.
-Photoswipe link class, data-size, and data-overlay title are still being printed to the <a> tag as before, but it fails to launch the overlay.

Same issue here on stable channel. Any AJAX call breaks Photoswipe.

@TKO Have you noticed comment #7? Blazy Photoswipe module active?

@thomas.frobieter Actually I'm not using Blazy Photoswipe. But I am using Masonry. Which is probably where the issue lies.

Same issue here on stable channel. Any AJAX call breaks Photoswipe. All link attributes stay the same, only the data-pswp-uid attribute is missing from main div with photoswipe-gallery class.

So I added this code to my custom js and it works.
$( document ).ajaxComplete(function( event, xhr, settings ) {
var $galleries = $('.photoswipe-gallery');
if ($galleries.length) {
$galleries.once('photoswipe').each(function (index) {
var $gallery = $(this);
$gallery.attr('data-pswp-uid', index + 1);
// Definitely prevent doble event binding on AJAX
$gallery.off('click', Drupal.behaviors.photoswipe.onThumbnailsClick);
$gallery.on('click', Drupal.behaviors.photoswipe.onThumbnailsClick);
});
}
});

I have the same issue, but not using the contrib "Photoswipe" module, but implemented it manually.

However I have copied one line of code from the "photoswipe module"

ie where the Javascript appends the "container" html for Photoswipe:

document.querySelector('body').innerHTML += settings.photoswipe.container;
(was already modified) a bit;

This was/is the original code of the module:

 // if body haven't special container for show photoswipe gallery append it.
        if ('container' in settings.photoswipe && !$('.pswp').length) {
          $('body').append(settings.photoswipe.container);
        }

in file:
https://git.drupalcode.org/project/photoswipe/-/blob/3.x/js/photoswipe.jquery.js

After changing body to "another selector" that is always on my page for example "main" it started working (but NOT yet correctly).

Then the drawback was that an image remained on the page (from the photoswipe popup)

Adding a placeholder for the "photoswipe" container to my "page.html.twig"
for example adding this at the end:

<div class="photoswipe-container"></div>

and then changing (not tested, is a hypthesis for this contrib module)

 // if body haven't special container for show photoswipe gallery append it.
        if ('container' in settings.photoswipe && !$('.pswp').length) {
          $('.photoswipe-container').append(settings.photoswipe.container);
        }

Hopefully this will help you guys as well, if this fixes the issue, I can always provide a patch against this module.

Kind regards

After adding code from #13 it helps for showing photoswipe on images that was loading ajax.

But I have this error:
Uncaught TypeError: right-hand side of 'in' should be an object, got undefined

I load photoswipe gallery with css class .photoswipe-gallery

This issue is blocked by missing test coverage for the photoswipe module.

Please first help to fix #2998694: Write tests for typical use-cases to reproduce this error, create a test and ensure the fix on this for all use-cases.
Hope you understand, we're jumping from one problem into the next as the module is very widely used in different scenarios.

See #2998694: Write tests for typical use-cases and help please. Until that, this issue is blocked.

Thank you!

Sorry it was my mistake in initializing photoswipe manually.

Now it works as designed.

The issue still persist. I have block, AJAX exposed filters. Changing the pager works, all images are opening in PhotoSwipe, changing the filter breaks it down.

This is still a bug in version 5 if you use for example https://www.drupal.org/project/views_infinite_scroll which requires AJAX, so reopening.

Does anyone knows if there's a workaround? Thanks!

Adding workaround in Issue Summary:

A workaround for a "Load more" function in Views not requiring AJAX until this gets fixed is https://www.drupal.org/project/views_load_more though it's not automatic, you manually need to click a "Load more" link.

Removing the workaround, because without AJAX, it's basically like the standard pager.

For infinite scroll in Views, the focus should probably be on getting #3508542: Allow Views Infinite Scroll to work without AJAX enabled on the view itself fixed.

Update the Issue Summary and title, and add a proposed resolution.