Open Gallery called from an Iframe with fancyBox

Question

Well, i have follow the instructions on that question: call Fancybox in parent from iframe

But, isn't work for me.

On the example, he has a gallery inside the javascript like:

$('.imagen').click(function(e){
    e.preventDefault();
    parent.$.fancybox([
        {href:'images/01.jpg', title: '01'},
        {href:'images/02.jpg', title: '02'},
        {href:'images/03.jpg', title: '03'}
    ],{
    //          href: this.href,
            helpers: {
                overlay: {
                opacity: 0.3
                } // overlay
                //, buttons: {}
            } // helpers
        }); // fancybox
    });

On my case, i'm using like the fancyBox page instructs:

<a href="javascript:parent.$.fancybox.open({href : 'myurl'});" rel="group1">Open something</a>
<a href="javascript:parent.$.fancybox.open({href : 'myurl'});" rel="group1">Open something</a>
<a href="javascript:parent.$.fancybox.open({href : 'myurl'});" rel="group1">Open something</a>
<a href="javascript:parent.$.fancybox.open({href : 'myurl'});" rel="group1">Open something</a>

It's working, but is showing simple images, not as gallery

how i can turn this on gallery?

lol, i know, but on there, isn't an option or example with iframe and gallery :) — Preston

l2aelba l2aelba · Accepted Answer · 2014-03-07T12:23:52

In your iframe :

HTML :

<a class="fancybox" rel="group1" href="1.jpg">Image#1</a>
<a class="fancybox" rel="group1" href="2.jpg">Image#2</a>

JS :

$(document).on('click','.fancybox',function(){
    var rel = $(this).attr('rel');
    var images = [];
    $('[rel="'+rel+'"]').each(function(){
        var image = $(this).attr('href');
        images.push({href:image});
    });
    parent.$.fancybox(images);
    return false;
});

Don't forget to include jQuery file in your iframe.

Untested , pls test with your real images

Parent : Need jQuery.js, Fancybox.js

iFrame : Need jQuery.js and my script upper

Open Gallery called from an Iframe with fancyBox

1 Answers