PhotoSwipe
PhotoSwipe copied to clipboard
PhotoSwipe closes active Bootstrap modal on close
I have a PhotoSwipe that opens via a trigger inside a Bootstrap 3 modal. When I close Photoswipe, it also closes the open modal.
See the page below, the PhotoSwipe gallery is triggered by clicking on an image.
https://goo.gl/KWbWmg
I created a workaround by adding a listener on 'close' to set a flag that disallows closing.
I then set switch the flag back on on 'destroy', but have to delay it by pswp.options.hideAnimationDuration.
...pswp initialization...
var allowClosing = true;
pswp.listen('close', function(){
allowClosing = false;
});
psw.listen('destroy', function(){
setTimeout(function(){
allowClosing = true;
}, gallery.options.hideAnimationDuration);
$(document).on('hide.bs.modal', '.modal', function(e){
if (!allowClosing) {
e.preventDefault();
return false;
}
});
But I have no idea what's triggering the hide event for Bootstrap in the first place.
encounter this issue too.
closes vex modal too
closes material modal as well :(
My less than ideal current solution is to just set all the options related to closing to false, remove the close button form the pswp div and add my own close function:
document.getElementsByClassName("pswp__top-bar")[0].addEventListener('click', (e) => {
const pswpElement = document.querySelectorAll('.pswp')[0] as HTMLElement;
pswpElement.classList.remove("pswp--open");
});
I had the same issue with angular material dialog, I resolved it by disabling history option. The problem is caused by backward navigation triggered on close.
Like Ayoubiedas, I solved it by disabling the history option:
openGallery(images?: IImage[]) {
images = images || this.images;
const options = {
index: 0, // start at first slide
history: false // this prevents the modals from closing
};
const gallery = new PhotoSwipe(this.photoSwipe.nativeElement, PhotoSwipeUI_Default, images, options);
gallery.init();
}
Still an issue for me, also it seems that the history
option is no longer available in the latest version.
Any solution in version 5.3.8? It's still closing the parent modal now. history
option is no longer available in this version.