Comment autoriser l'utilisateur à cliquer sur un lien tout en affichant une galerie photoswipe?

Question

J'utilise le plugin PhotoSwipe pour jQuery.

Mon site Web utilise un menu fixe lorsque l'utilisateur a défilé vers le bas.

Avec un index z, je n'ai pas réussi à faire chevaucher la galerie photoswipe de mon menu. J'ai donc redimensionné le volet par défaut de photoswipe, pour épargner l'espace pour le menu. Cette apparence que je préfère aussi. Maintenant, quand j'ouvre une photo, mais que naviguez vers une autre page avec PhotoSwipe, un rappel de PhotoSwipe semble rediriger l'utilisateur à l'endroit d'où il venait.

Si j'utilise le rappel destroy de photoswip et y mets une alerte, cela retarde la redirection (retour à la page d'où l'utilisateur vient).

Comment autoriser un utilisateur à fermer une galerie photoswipe sans être redirigé?

EDIT: Voici comment j'initialise la galerie photoswipe.

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 Vous voyez ici une capture d'écran de mon écran photoswipe. Cela montre que mon menu principal est toujours visible et que l'utilisateur peut cliquer dessus. fichier

Answer 1

src/js/history.js contient ce code:

 _listen('destroy', function() { 
      if(!_hashReseted) { 
       returnToOriginal(); 
      } 
     }); 

Vous n'avez pas fourni le code reproductible, donc ce n'est pas 100%, mais devrait être utile. Je changerais ce code à ceci:

 _listen('destroy', function() { 
      if(!_hashReseted && !myApp.shouldClosePhotoswipe) { 
       returnToOriginal(); 
      } 
     }); 

Dans votre application ajoutez ce code:

var myApp = { 
    // mix in with your javascript code 
    shouldClosePhotoswipe: false 
} 

Et lorsque le menu est cliqué pour aller quelque part il suffit d'ajouter cette ligne:

myApp.shouldClosePhotoswipe = true; 

Ensuite, vous devez reconstruire le fichier dist/photoswipe.js. Vous pouvez aussi éditer directement le fichier dist/photoswipe.js.