Search code examples
jqueryfancyboxcarousel

ItemSlide + Fancybox Supersized (launch Fancybox from within function)

I'm trying to combine a carousel made with ItemSlide.js with Fancybox, extended to supersize.

Here is an example of Fancybox Supersized (without integration into ItemSlide) http://jsfiddle.net/RyTcS/

ItemSlide can be found here: http://itemslide.github.io/

What I'm trying to do is open an image from the carousel to expand full-page on tap/click using FancyBox Supersized.

My code at the moment is this:

// Start the carousel        
carousel_1 = $("#outfit_1");
carousel_1.itemslide({disable_clicktoslide:true});

// On tap, open Fancybox supersized
carousel_1.on('clickSlide', function(event) {
    console.log("Clicked - "+ event.slide);
    var image = $('#outfit_1 li').eq(event.slide).attr('data-image');
    console.log(image);
    $.fancybox({
        padding    : 0,
        margin     : 5,
        afterLoad  : function () {
            $.extend(this, {
                aspectRatio : false,
                type    : 'html',
                width   : '100%',
                height  : '100%',
                content : '<div class="fancybox-image" style="background-image:url(' + image + '); background-size: cover; background-position:50% 50%;background-repeat:no-repeat;height:100%;width:100%;" /></div>'
            });
        }
    });
});

Here is a JS Fiddle of my example: http://jsfiddle.net/8cwgpwdk/

It does not respond on click. Does anyone have a clue?

Solution

  • Ok so here is a solution with FancyBox, to open fancybox simply use this method:

    $.fancybox.open

    Here is a jsFiddle (with afterload callback): http://jsfiddle.net/8cwgpwdk/14/

    BTW part of the reason your first example didn't work is because you loaded FancyBox from github and they block so use a cdn instead. I fixed that as well.