Jakob Alexander Eichler
Jakob Alexander Eichler

Reputation: 3056

How to allow the user to click on a link while displaying a photoswipe gallery?

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. enter image description here

Upvotes: 0

Views: 402

Answers (1)

Marko Avlijaš
Marko Avlijaš

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

Related Questions