打开fancybox 3进入iframe父级

Question

这是我的问题： - 我有一个 fancybox 3 画廊介绍一个 iframe - 当我点击其中一个链接时，我希望图像显示在 iframe 的父级顶部

我做了很多研究并尝试了几种解决方案

我发现了这个：call Fancybox in parent from iframe 但它只为fancybox 2 提供了一个解决方案

这是我在 iframe 上的代码：

$(document).ready(function() {
    parent.$(".fancybox").fancybox({
        href:  this.href
    });
});

请注意

• 我在 iframe 和父级中都包含了 jquery 和 fancybox 3

• fancybox 在 iframe 和父级中独立工作，但不能从 iframe 调用以显示在父级中（我的问题）

• 我也试过了：

  $(".fancybox", top.document).fancybox

  $(".fancybox", window.opener.document).fancybox

  $(".fancybox", window.parent.document).fancybox

这些都不起作用

非常感谢您的关注

Answer 1

我希望您在进行“大量研究”时将文档加红。来自文档：

从内部访问和控制父窗口中的fancybox 内嵌框架：

// Adjust iframe height according to the contents
parent.jQuery.fancybox.getInstance().update();

这应该给你一个线索，你可以使用parent.jQuery.fancybox 来使用父页面中的 API。

然后，API 部分应该为您提供如何以编程方式打开图片库的线索：

$.fancybox.open([
    {
        src  : '1_b.jpg',
        opts : {
            caption : 'First caption',
            thumb   : '1_s.jpg'
        }
    },
    {
        src  : '2_b.jpg',
        opts : {
            caption : 'Second caption',
            thumb   : '2_s.jpg'
        }
    }
], {
    loop : false
});

所以，结合这两个 sn-ps 应该会给你答案。