My website has a Photoswipe image gallery from . The issue I'm facing is that the CSS class does not reset or clear after closing the gallery for the second time.
For example, when a user opens item 1, the images are loaded into the picture div via AJAX. Clicking on an image from item 1 opens it in Photoswipe with the following class:
class="pswp pswp--supports-fs pswp--open pswp--animate_opacity pswp--notouch pswp--css_animation pswp--svg pswp--animated-in pswp--visible"
After closing the image from item 1, the class resets to:
class="pswp"
If the user closes item 1 and then opens item 2, the same class is set when opening an image from item 2. However, upon closing the image from item 2, only the attribute changes to:
aria-hidden="true"
but the class remains the same as before, instead of resetting to just "pswp". This causes issues with interaction on the website due to an invisible div/class layer blocking everything else. It's crucial for the class to change back to "pswp."
When populating the picture div using AJAX/JS (an ID is added to the div):
if (i == 0) {
$('#listing_photos_container').append('<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"><a href="' + json[i].image_url + '" itemprop="contentUrl" data-size="512x400" data-index="' + i + '"><img src="' + json[i].image_url + '" height="400" width="600" itemprop="thumbnail" alt="listingPhoto" class="listing-photo"></a></figure>');
} else {
$('#listing_photos_container').append('<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" class="listing-photo-holder"><a href="' + json[i].image_url + '" itemprop="contentUrl" data-size="512x400" data-index="' + i + '"><img src="' + json[i].image_url + '" height="400" width="600" itemprop="thumbnail" alt="listingPhoto" class="listing-photo-holder"></a></figure>');
}
To clear the photo div using JS/JQuery:
$('#listing_photos_container').html('');
There seems to be a double function call issue when users click on a photo to view fullscreen. The listener function code is triggered twice:
$.ajax({
type: "POST",
url: 'http://example.com/action?action=photos',
data: {id: id},
success: function (data) {
// Code for styling etc.
// PhotoSwipe initialization and configuration
}
});