Question

我知道这个问题已经被问到了，但主要是针对Fancybox 2（而不是3），我发现的唯一答案对我没有帮助。
我的网页有两个框架，一个框架包含Fancybox Gallery。到目前为止，当我单击图像时，它们仅在相应的框架中打开，并且Id希望图像填充整个屏幕。按照此处的答案（Open fancybox 3 into iframe parent），我编写了以下代码，但操作不正确。
我忘了什么吗？我是否应该在项目的主页上放置一些代码，即包含两个iframe的代码？我该怎么办？

<!DOCTYPE html>
<html lang="en">

<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<link  href="jquery.fancybox.min.css" rel="stylesheet">
<script src="jquery.fancybox.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    parent.jQuery.fancybox.getInstance().update();
});

$.fancybox.open([
    {
        src  : 'IMG_3301.JPG',
        opts : {
            caption : 'First caption',
            thumb   : 'IMG_3301 - copie.JPG'
        }
    },
    {
        src  : 'IMG_3302.JPG',
        opts : {
            caption : 'Second caption',
            thumb   : 'IMG_3302 - copie.JPG'
        }
    }
], {
    loop : false
});
</script>

</head>

<body>

<a data-fancybox="gallery" href="IMG_3301.JPG">
    <img src="IMG_3301 - copie.JPG">
</a>

<a data-fancybox="gallery" href="IMG_3302.JPG">
    <img src="IMG_3302 - copie.JPG">
</a>

</body>
</html>

Answer 1

通过使用parent.jQuery.fancybox，您可以访问父iframe中的fancybox，并且要在父iframe中启动fancybox，只需结合两个代码段即可，例如parent.jQuery.fancybox.open(..)

示例：

  var $links = $(".imglist a");

  $links.click(function () {
    parent.jQuery.fancybox.open($links, {
      // Your custom options
    }, $links.index(this));

    return false;
  });

演示-http://fancyapps.com/tmp/embed/

Fancybox 3-全屏显示iframe画廊

1 个答案: