Reputation: 3056
I am using the PhotoSwipe Plugin for jQuery.
My website uses a fixed menu, when the user has scrolled down.
With a z-index I was not able to make the photoswipe gallery overlap my menu. So I resized the default pane of photoswipe, to spare out the space for the menu. This appearance I also prefer.
Now when I open a photo, but than navigate to an other page with PhotoSwipe, some callback of PhotoSwipe appears to redirect the user back to where he came from.
If I use the destroy call back of photoswip and put an alert in it, this delays the redirection (back to the page where the user came from).
How can I allow a user to close a photoswipe gallery, without being redirected?
EDIT: This is how I initialize the photoswipe gallery.
function showSoftwareGallery(sections, index){
var pswpElement = document.querySelectorAll('.pswp')[0];
var items = new Array(sections.length);
for(var i=0; i<sections.length; i++){
items[i] = {
src: sections[i].image,
w: 1920,
h: 1080,
};
}
// define options (if needed)
var options = {
// optionName: 'option value'
// for example:
index: index, // start at first slide
escKey: true,
arrowKeys: true,
shareEl: false,
closeEl:true,
captionEl: true,
fullscreenEl: true,
zoomEl: true,
};
// Initializes and opens PhotoSwipe
var headerHeight = $('nav').first().height();
var height = $(window).height() - headerHeight;
$('.pswp').first().css('height', height + 'px');
$('.pswp').first().css('top', headerHeight + 'px');
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.listen('destroy', function() { alert('destroy')});
gallery.init();
}
Edit 2
You see here a screenshot of my photoswipe display. It shows that my main menu is still visible and the user can click on it.
Upvotes: 0
Views: 402
Reputation: 1659
src/js/history.js
file contains this code:
_listen('destroy', function() {
if(!_hashReseted) {
returnToOriginal();
}
});
You didn't provide reproducible code, so this isn't 100%, but should be helpful. I'd change that code to this:
_listen('destroy', function() {
if(!_hashReseted && !myApp.shouldClosePhotoswipe) {
returnToOriginal();
}
});
In your app add this code:
var myApp = {
// mix in with your javascript code
shouldClosePhotoswipe: false
}
And when menu is clicked to go somewhere just add this line:
myApp.shouldClosePhotoswipe = true;
Then you need to rebuild dist/photoswipe.js
file.
You could also just edit the dist/photoswipe.js
file directly.
Upvotes: 1