从父页面中的 iFrame 打开 Fancybox3

Question

很抱歉，我不明白 Janis 在此页面上的回答 Open fancybox 3 into iframe parent ，这对我来说太技术性了，因为它没有给出准确的答案。

我无法从指向文档的答案中找出在父页面中打开所需的脚本（在有关打开 iframe 的部分中找到，而不是从 iframe 打开到父页面页面），不幸的是我无法在该页面上发表评论，所以我在这里。

如何从 iframe 内部访问和控制父窗口中的 fancybox：

// Close current fancybox instance
parent.jQuery.fancybox.getInstance().close();

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

这是否意味着您必须在一个脚本中列出要在父页面中打开的所有图像？ 如果是这样，当您有许多图像并且破坏了使每个链接单独调用 fancybox 的目的时，这没有意义，就像这样：

<a href="images1.jpg" data-fancybox data-caption="image 1">
<img src="images/image1_sm.jpg"  alt="" class="image"/></a>

或者这是否意味着您必须为要在父页面中打开的每张图片制作一个脚本？

Answer 1

这是一个可以在当前页面或父页面中打开图片库的 sn-p：

var $fb_links = $('[data-fancybox="images"]');

$fb_links.click(function() {

    if ( window.self !== window.top ) {

        window.parent.jQuery.fancybox.open( $fb_links, {
            //animationEffect : 'fade',
            hash : false
        }, $fb_links.index( this ) );

    } else {
        $.fancybox.open( $fb_links, {}, $fb_links.index( this ) );
    }

    return false;

});

我希望你能看到创建你自己的点击事件来启动脚本并不是那么可怕。