Fancybox 3 doesn't resize Facebook plugin on mobile devices

Question

I have Fancybox set so that each image opens in a lightbox with unique Facebook like/share buttons. In Fancybox 2, the window resizes perfectly to fit the title and buttons, on both computers and mobile devices.

But in the new Fancybox 3 (which I added to enable swiping), Fancybox adds a huge area of whitespace below the plugin buttons--but ONLY on mobile devices. I can't figure out how to remove this space--and it's large enough to really look awkward. Since the Facebook buttons are fine when viewed through Fancybox 2 on mobile devices, I'm guessing this is a problem with Fancybox 3.

Here is my script for Fancybox 2. Both computers and mobile viewing are fine:

$("#gallery-events a").fancybox({

beforeShow: function () {
if (this.title) {
    this.title += '<br />'; // Line break after title
    this.title += '<div class="fb-like-container"><div class="fb-like" data-href="' + this.href + '" data-layout="button_count" data-share="true"></div></div>';
    }
},
afterShow: function () {
    FB.XFBML.parse();
    $.fancybox.update(); // resize after show
},
helpers: {
    title: {
        type: 'inside'
    }
},
    loop: true 
});

Fancybox 2 demonstration: http://www.lycochoir.com/swipe-3/photos.html

For Fancybox 3, the script is very similar. Following advice on this site, I only changed "beforeShow" to "afterLoad" and changed the title helper to "caption."

$("#gallery-events a").fancybox({

afterLoad: function () {
if (this.title) {
    this.title += '<br />'; // Line break after title
    this.title += '<div class="fb-like-container"><div class="fb-like" data-href="' + this.href + '" data-layout="button_count" data-share="true" mobile="false"></div></div>';
    }
},
afterShow: function () {
    FB.XFBML.parse();
    $.fancybox.update(); // resize after show
},
    caption: {
        type : 'inside'
    },
    loop: true 
});

Fancybox 3 demonstration: http://www.lycochoir.com/photos/annual-events.html

On a traditional browser, the two lightboxes should look identical. The massive white space beneath the buttons only appears when the Fancybox 3 lightbox is viewed on a mobile device, such as a phone or iPad. And the white space disappears when the button plugin DIV is removed.

Since the #.fancybox.update() script obviously functions correctly on a traditional browser (even in Fancybox 3), I'm guessing the problem lies in the part of the Fancybox 3 script that targets mobile browsers. Or maybe the update code doesn't work for mobile devices anymore?

I'm at a loss. Can't see why Fancybox would add 100px or so of vertical space just due to the plugin. I've even removed the "fb-like-container" style (which adds 10px top and bottom margins to move the buttons away from the title and edge) but that's not the culprit. Anyone have any other ideas?

ETA: After hours of going blind looking at the Fancybox script, I may have finally found an answer. I moved the #.fancybox.update(); up into the afterLoad: function. The box now seems to resize correctly on mobile, although my tests are still early.

Now I'm wondering if the FB.XFBML.parse() needs to be in the afterLoad too. Are "beforeShow" and "afterShow" old code in Fancybox 3? The beta has been out for almost two years now--I wish there would be more documentation on this version. I've had some stumbles with it, but the swiping effect is pretty great. Much smoother than the plugins I tried with Fancybox 2.

SECOND EDIT: Here's where I am: if I add a style specifying the exact height of the button plugin (20px) AND place the $.fancybox.update(); into the afterLoad function, it works. So anyone out there...if that's all you need, that works.

However, my goal has always been to have a like button AND a comment box. But of course, you cannot specify a height for a comment box. And if you move the $.fancybox.update(); into afterLoad, Fancybox does not resize the lightbox area to fit the comment box--it hangs off the edge. If you want the comment box to fit in the area, you need to move the update script back into afterShow - but then you get the massive white space caused by the Like button, which was the original problem!

I'm continuing to work on this--just thought I would update anyone interested on my progress. The main problem is that the $.fancybox.update() script cannot be in afterLoad unless the dynamic content (Facebook plugins) has specifically-set heights--otherwise it won't expand the lightbox as needed. Anyone's ideas are still welcome!

THIRD EDIT - The extra white space only appears when the lightbox for a particular image is loaded on a mobile device. If you turn your device to the side (horizontally or vertically) the lightbox resizes and the white space disappears! Turn it back to the original orientation, and the white space is still gone. But then go to the NEXT image, and the white space is back.

In other words, the huge white space only appears when the lightbox's image FIRST loads (on mobile). I'm assuming that Fancybox runs a script when a mobile device's orientation is turned, and that script seems to fix the problem. Is that the "onUpdate" script? Is there any way to have the same thing happen when the image first loads? That would fix the problem, but I don't know how to do it. I have played around with adding "onUpdate" as a function (after afterShow) but it either hasn't done anything or has screwed up the entire script.

Answer 1

As usual, the fix was deceptively simple and did not involve changing any Fancybox script.

My Fancybox 3 script remained the same as what appears above. The parse and update are still in afterShow.

All I had to do was add a height to the container that holds the Facebook Like button. The Like button was already inside a container DIV that enabled top and bottom margins (to space the button away from the caption and the comment box). I simply added a height to this container DIV, and all of a sudden, all the white space that Fancybox wanted to add when it loaded the Like button on mobile devices was gone. Voila!

Here is the style (I did not post any CSS above). I added this style to the Fancybox CSS script.

.fb-like-container {
margin-top: 10px;
margin-bottom: 10px;
height: 20px;
}

In case you look at my Fancybox 3 link on mobile and still see extra white space at the bottom of the lightbox: that space is caused by the comment box, and is a known issue. The white space that I needed to eradicate in this post was a separate situation, and was much larger and annoying.

Hope this can help someone else with Fancybox someday!