Integration with fancyBox (v1.3.4)

[turbolinks]

Integration with fancyBox (v1.3.4)

Hi,

latest fancyBox version 2.1.2 and turbolinks are working fine. Unfortunately fancyBox from version 2.0 is not free for commercial use anymore.

I'm closing the issue as probably the problem is on the fancyBox side...

[Rosey]

For those wondering how to get fancybox 1.3.4 working with turbolinks (because I didn't want to update my fancybox.) :

Call $.fancybox.init() on page:change

Update this line in the fancybox js file (function is _start, approx. line 76 on the non minified version):

selectedOpts = $.extend({}, $.fn.fancybox.defaults, (typeof $(obj).data('fancybox') == 'undefined' ? selectedOpts : $(obj).data('fancybox')));

to

currentOpts = selectedOpts = $.extend({}, $.fn.fancybox.defaults, (typeof $(obj).data('fancybox') == 'undefined' ? selectedOpts : $(obj).data('fancybox')));

This seemed to fix all my problems :)

[jd-erreape]

I've been able to use it without changing the fancybox.js file. Only with:

$(window).bind('page:change', function() {
    $.fancybox.init();
});

Thanks R-osey! :)

Cool!

Thanks for your help @jd-erreape and @R-osey!

Marek

[antpaw]

It doesnt work for me (v. 2.1.5)

i made this hack to make it work

// turbolinks vs fancybox bug
$galleryHolder = $('<div id="gallery_holder"></div>').appendTo(document.body);
$('.gallery').fancybox({
    parent: $galleryHolder,
    openEffect: 'none',
    closeEffect: 'none'
});

I guess something is cached wrong inside fancyBox.

[allaire]

@antpaw thank you for this, I had this issue on iOS only, your code fixed it! Did you had the problem also on desktop or mobile only like me?

[allaire]

@antpaw any idea why the parent attribute fix it?

[antpaw]

@allaire i think the part where the "parent" elem is cached in the fancyBox is broken because they dont let go of it after it was removed from the dom, pretty sure this is not a turbolink issue

[allaire]

@antpaw Thanks for the additional info. It's still weird tho, since the parent is not truly the parent of the lightbox stack in the DOM (see https://cloudup.com/cBATDstodGb)

[antpaw]

@allaire no i think thats okay, the holder contains only the big images that you see when you click on the thumbs, im sure this element will get some children once you click

[allaire]

@antpaw nothing change when I click, the container does not get any child elements, but I guess that's ok, as long as it fixes the issue :)

[joselo]

@antpaw it works for me, thanks

[alpracka]

@antpaw thank you too. This problem is still relevant for v2.1.5 as it's the latest version.

[antpaw]

it still has some bugs after the popstate event (whenever you use the back button) :(
hope they stop caching $('body') soon

[tomasmuller]

Thank you @jd-erreape!

[henev]

Thank you @antpaw.

Working fine for me. I am using fancybox version 2.1.5

But I suggest you to use:

// turbolinks vs fancybox bug
var $galleryHolder = $('#gallery_holder');

if ($galleryHolder.length === 0) {
    $galleryHolder = $('<div id="gallery_holder"></div>').appendTo(document.body);
}

$('.gallery').fancybox({
    parent: $galleryHolder,
    openEffect: 'none',
    closeEffect: 'none'
});

[sheharyarn]

The solutions mentioned by @iceless58 and @antpaw not working for me.

Using Fancybox2-Rails (Fancybox 2.1.5) with Ruby 2.2.0, Rails 4.2.0 and Turbolinks 2.5.3. (cc: @Kyparn)

[benbonnet]

This won"t work when using it programatically with $.fancybox.open