Question

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

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

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

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

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

确定关闭或更新父窗口，但是如何在父窗口中打开各种链接？

然后，贾尼斯（Janis）说：

这应该为您提供一条线索，您可以使用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

这是一个可在当前页面或父页面中打开图片库的代码段：

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;

});

希望您能看到创建自己的单击事件来启动脚本并没有那么可怕。

从父页面中的iFrame打开Fancybox3

1 个答案: