在 AJAX 请求中手动打开 Magnific Popup

Question

我想加载一个 (base64) png 图像，以便在用户单击预览图标时弹出。每个预览图标都会显示另一张图片，该图片根据某些参数通过 ajax 加载。

请求完成后如何手动调用MP？每次 ajax 完成时都说找不到图像。或者干脆不显示图像（黑色透明屏）

我的代码如下所示：

HTML 和 JS:

function loadPopupImage(element, p1, p2, p3, p4, p5) {
  if (element.href == "") {
    var request = $.ajax({
      method: "POST",
      dataType: "xml",
      timeout: 5000,
      data: {
        P1: p1,
        P2: p2,
        p3: p3,
        P4: p4,
        P5: p5
      },
      url: "<%=URL%>"
    });
    request.done(function(response) {
        element.href = "data:image/png;base64," + response.documentElement.textContent;
        $.magnificPopup.open({
          items: {
            src: element
          },
          type: 'inline'
        });
      }
    }
  }

<a class="magnific-popup" onclick="loadPopupImage(this,'<%=p1%>','<%=p2%>','<%=p3%>','<%=p4%>','<%=p5%>')">
  <img width="20" src="/images/70x70px.png">
</a>

如果我删除 $.magnificPopup.open 部分。它显然没有显示弹出窗口，但我可以再次单击预览，然后可以在浏览器选项卡中看到图像。

Answer 1

我找到了解决办法。其实很简单...

request.done(function(response){
    element.href = "data:image/png;base64,"+response.documentElement.textContent;
    $.magnificPopup.open({
        items: {
            src: element.href,
        }
    });
});

我必须将 .href 添加到元素中。现在它就像一个魅力。

我也可以将数据字符串直接添加到 src，但我想将数据字符串保留在元素中。这样 magnific 就可以在用户单击 link 时打开图像，而无需再次执行 ajax 请求。

在 AJAX 请求中手动打开 Magnific Popup

Magnific Popup open manually in AJAX request

javascript

ajax

jquery

magnific-popup