结合 PhotoSwipe 和 Magnific Popup（Ajax 类型）

Question

我正在尝试结合 Dmitry Semenov 的 PhotoSwipe (link) with the Ajax Type of his Magnific Popup (link)。更具体地说，我的 index.html 文件中有一个 link。单击它时，将显示 Ajax Type Magnific Popup，显示 other.html 的内容。在这个弹出窗口中（即在 other.html 文件中）是一个 PhotoSwipe 图片库。当我单击图像时，PhotoSwipe 画廊按预期显示并且工作正常。但是，当我单击关闭按钮（'x' 图标）或按 ESC 键时，PhotoSwipe 和 Magnific Popup 都关闭了。如何更改此行为以便仅关闭 PhotoSwipe 弹出窗口？有没有办法在显示 PhotoSwipe 弹出窗口时 "disable" Magnific Popup，以便 Magnific Popup 在 PhotoSwipe 关闭之前不响应任何点击或按键？

我对 JavaScript 只有非常基础的知识，所以非常感谢 "hand-holding" 的回答方法。

Answer 1

我做了类似的事情，结合了 Magnific 和 Colorbox。 Magnific 能够覆盖其代码的某些部分而无需更改源代码，如 documented in the FAQ。就我而言，它看起来像这样：

// 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);
  }
};

您可以将 if 测试更改为特定于 PhotoSwipe 的测试。也许用 if ($(".pswp--open").length > 0) { 替换该行会起作用。（JavaScript 计算（通过 jQuery）带有 pswp--open class 的元素的数量，这至少从 PhotoSwipe 演示中看来是 class 打开时添加到标记中。）

结合 PhotoSwipe 和 Magnific Popup（Ajax 类型）

Combine PhotoSwipe with Magnific Popup (Ajax Type)

html

javascript

photoswipe

magnific-popup