Fancybox 3 - display iframe gallery full screen

Question

I know this question has already been asked but mostly for Fancybox 2 (and not 3) and the only answer I did found didn't help me though.
My web page has two frames, one hosts the Fancybox Gallery. So far, when I click on images, they only open in the corresponding frame and Id like the images to fill the whole screen. Following the answer here (Open fancybox 3 into iframe parent) I made the following code but I didn't went right.
Did I forgot something ? Should I put some code in the main page of my project, the one that holds the two iframes ? Something else I should do ?

<!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>

Janis Janis · Accepted Answer · 2019-03-14T19:08:35

By using parent.jQuery.fancybox you can access fancybox within the parent iframe, and, to start fancybox in parent iframe, simply combine your two snippets, like parent.jQuery.fancybox.open(..)

Example:

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

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

    return false;
  });

Demo - http://fancyapps.com/tmp/embed/

Fancybox 3 - display iframe gallery full screen

1 Answers