Kombinieren PhotoSwipe mit Magnific Popup (Ajax Typ)

Question

Ich versuche, Dmitry Semenovs PhotoSwipe() mit dem Ajax Type seines Magnific Popup (link) zu kombinieren. Genauer gesagt, habe ich einen Link auf meine index.html Datei. Wenn Sie darauf klicken, wird ein Ajax Type Magnific Popup angezeigt, das den Inhalt von other.html anzeigt. In diesem Popup (d. H. Innerhalb der Datei other.html) befindet sich eine PhotoSwipe-Galerie von Bildern. Wenn ich auf die Bilder klicke, wird die PhotoSwipe-Galerie wie erwartet angezeigt und es funktioniert einwandfrei. Wenn ich jedoch auf die Schaltfläche zum Schließen (das Symbol "x") klicke oder die ESC-Taste drücke, werden sowohl PhotoSwipe als auch Magnific Popup geschlossen. Wie kann ich dieses Verhalten ändern, sodass nur das PhotoSwipe-Popup geschlossen wird? Gibt es eine Möglichkeit, das Magnific Popup zu "deaktivieren", während das PhotoSwipe-Popup angezeigt wird, sodass das Magnific Popup nicht auf Klicks oder das Drücken von Tasten reagiert, bis das PhotoSwipe geschlossen ist?

Ich habe nur ein sehr grundlegendes Wissen über JavaScript, also würde ich wirklich einen "Hand-Holding" -Ansatz für die Antwort schätzen.

Answer 1

Ich habe etwas ähnliches mit der Kombination von Magnific und Colorbox getan. Magnific hat die Fähigkeit, einige Teile seines Codes zu überschreiben, ohne die Quelle zu ändern, wie documented in the FAQ. In meinem Fall sah es wie folgt aus:

// Prevent "Escape" from closing Magnific popup when Colorbox popup is open 
$.magnificPopup.instance.close = function() { 
    if ($("#colorbox").is(":visible")) { 
    // Don't do anything with Magnific if Colorbox is doing its thing 
    return false; 
    } else { 
    // Do what it would normally do 
    $.magnificPopup.proto.close.call(this); 
    } 
}; 

Sie würden Ihr if Test etwas PhotoSwipe spezifische haben ändern. Vielleicht würde das Ersetzen dieser Zeile mit if ($(".pswp--open").length > 0) { funktionieren. (Das JavaScript zählt (über jQuery) die Anzahl der Elemente mit der Klasse pswp--open, die zumindest aus der PhotoSwipe-Demo als Klasse angezeigt wird, die zum Markup hinzugefügt wird, wenn sie geöffnet wird.)