Merging 'open in a parent from iframe', 'title on side' and 'customising title' in Fancybox

Question

I want to open the Fancybox in a parent page from iframe, with the title on the right side and using a title and a description for my pictures.

I managed to make the three ideas work separately from these examples:

Open iframe in parent

Title on right

Custom title using a title and img alt

However, I'm having trouble merging the three codes. I'm using Fancybox 2.1.7.

After a lot of reading all posts I could find about parents from iframe and callbacks, I realized that my problem may be that the callbacks I need to use - beforeShow and afterLoad - are not working in a parent from iframe.

I ended up reaching at this code trying to join 'parent-from-iframe' and 'title-on-right' which I put in my iframed page:

$(document).ready(function () {
    $(".fancybox").click(function (e) {
        e.preventDefault();
        parent.$.fancybox({
            // $(".fancybox").fancybox({
            href: this.href,
            helpers: {
                title: null
            },
            beforeShow: function () {
                var html = '<span>' + this.title + '</span>';
                $('.fancybox-sidebar').append(html);
            },
            tpl: {
                wrap: '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"><div class="fancybox-sidebar"></div></div></div></div></div>'
            },
        }); // fancybox
    }); // click
}); // ready

The combination of either parent.$.fancybox({ or $(".fancybox").fancybox({ with this.href makes beforeShow stop working at all. But beforeShow works as expected when $(".fancybox").fancybox({ is uncommented. And my pictures are opened in parent page when I'm using just parent.$.fancybox({ with this.href uncommented.

How can I call beforeShow and afterLoad (from the title-and-description code) in a parent page?

I tried this:

$(document).ready(function () {
    $(".fancybox").click(function (e) {
        e.preventDefault();
        parent.$.fancybox({
            //$(".fancybox").fancybox({
            href: this.href,
            title: this.title,
            helpers: {
                title: null
            },
            parent.$.fancybox.click(function () {
                afterLoad: function () {
                    var title = this.title ? this.title : " ";
                    var alt = $(this.element).find('img').attr('alt') ? $(this.element).find('img').attr('alt') : " ";
                    this.title = '<h3>' + title + '</h3>' + alt + '<br />';
                }
            }); //closes parent afterLoad
            beforeShow: function () {
                parent.$.fancybox.ready(function () {
                    var html = '<span>' + this.title + '</span>';
                    $('.fancybox-sidebar').append(html);
                }); // closes parent beforeShow
            }, //closes parent beforeShow
            tpl: {
                parent.$.fancybox.ready(function () {
                    wrap: '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"><div class="fancybox-sidebar"></div></div></div></div></div>'
                }); //closes parent tpl
            }, //closes tpl
        }); // fancybox
    }); // click
}); // ready

But it didn't work. I'm a beginner and I think I know what needs to be done but I have no idea how to do it.

It's a localhost project. I read someone in here saying that this could be a problem, but as all three codes work perfectly for me, separately, I'm hoping it won't be...

Any help would be much appreciated!

Janis Janis · Accepted Answer · 2017-05-04T06:23:04

The problem seems to be here:

helpers: {
        title: null
    },
parent.$.fancybox.click(function() { <------ what is this ?
    afterLoad: function () {

You have to pass an object containing options and their values.

btw, I think that any modern code editor would high such syntax error.

Merging 'open in a parent from iframe', 'title on side' and 'customising title' in Fancybox

1 Answers