Question

我正在尝试将Dmitry Semenov的PhotoSwipe（link）与他的Magnific Popup Ajax Type（link）结合起来。更具体地说，我的index.html文件上有一个链接。单击它时，会显示Ajax Type Magnific Popup，显示other.html的内容。在此弹出窗口内（即在other.html文件中）是一个PhotoSwipe图像库。单击图像时，PhotoSwipe库按预期显示，并且工作正常。但是，当我单击关闭按钮（“x”图标）或按ESC键时，PhotoSwipe和Magnific Popup都会关闭。如何更改此行为以便仅关闭PhotoSwipe弹出窗口？有没有办法在显示PhotoSwipe弹出窗口时“禁用”Magnific Popup，以便Magnific Popup在PhotoSwipe关闭之前不响应任何点击或按键？

我只对JavaScript有一个非常基本的知识，所以我真的很感激这种答案的“手持”方法。

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类的元素数量，至少从PhotoSwipe演示中看来，它是一个在标记时添加到标记中的类。＃39; s打开了。）

将PhotoSwipe与Magnific Popup（Ajax Type）结合使用

1 个答案: