Open fancybox 3 into iframe parent

Question

Here is my problem : - i have an fancybox 3 gallery intro an iframe - when i click to one of the link, i would like the image showing on top of the parent of my iframe

I have made many researches and tried several solutions

I found this : call Fancybox in parent from iframe but it only provide a solution for fancybox 2

Here is my code on the iframe :

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

Please note

i have included jquery and fancybox 3 both in the iframe and the parent
fancybox works like a charm independently in the iframe and the parent, but cannot be called from the iframe to be displayed in the parent (my problem)
i have also tried :

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

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

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

None of these worked

Thank you very much for your attention

Janis Janis · Accepted Answer · 2018-03-31T08:22:06

I hope you red the docs while doing "many researches". From the docs:

To access and control fancybox in parent window from inside an iframe:
// Adjust iframe height according to the contents
parent.jQuery.fancybox.getInstance().update();

This should give you a clue that you can use parent.jQuery.fancybox to use API from the parent page.

Then, API section should give you a clue how to open image gallery programmatically:

$.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
});

So, combining these two snippets should give you the answer.

Open fancybox 3 into iframe parent

1 Answers