Wie kann der Benutzer auf einen Link klicken, während eine Fotostrip-Galerie angezeigt wird?

Question

Ich verwende das PhotoSwipe Plugin für jQuery.

Meine Website verwendet ein festes Menü, wenn der Benutzer gescrollt hat.

Mit einem Z-Index konnte ich die Fotostrip-Galerie nicht überlappen mein Menü. Also änderte ich die Größe des Standardfensters von Photoswipe, um den Platz für das Menü zu sparen. Diese Erscheinung bevorzuge ich auch.

Wenn ich nun ein Foto öffne, aber mit PhotoSwipe zu einer anderen Seite navigiere, scheint ein Rückruf von PhotoSwipe den Benutzer dorthin zurückzuführen, wo er hergekommen ist.

Wenn ich den Destroy Callback von Photoswip benutze und einen Alarm einlege, verzögert dies die Umleitung (zurück zu der Seite, von der der Benutzer kam).

Wie kann ich einem Benutzer erlauben, eine Fotostrip-Galerie zu schließen, ohne umgeleitet zu werden?

BEARBEITEN: So initialisiere ich die Fotostrecke-Galerie.

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 Sie sehen hier einen Screenshot von meinem photoswipe Display. Es zeigt, dass mein Hauptmenü immer noch sichtbar ist und der Benutzer darauf klicken kann.

Answer 1

src/js/history.js Datei enthält diesen Code:

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

Sie nicht reproduzierbaren Code vorsah, so ist dies nicht zu 100%, sollte aber hilfreich sein. Ich würde diesen Code dies ändern:

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

In Ihrer App diesen Code hinzu:

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

Und wenn das Menü irgendwo hin geklickt wird fügen Sie einfach diese Zeile:

myApp.shouldClosePhotoswipe = true; 

Dann müssen Sie die Datei dist/photoswipe.js neu erstellen.
Sie könnten auch nur die dist/photoswipe.js Datei direkt bearbeiten.