CODEWITHSUNDEEP
jqueryfancyboxcarousel
chocolata
chocolata

Reputation: 3338

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?

Upvotes: 1

Views: 300

Answers (2)

nir9
nir9

Reputation: 86

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.

Upvotes: 1

nir9
nir9

Reputation: 86

There is no need in using FancyBox as what your trying to do is very simple to do with just jQuery.

$("#fullscreen").show().css("background-image","url("+image+")");

Here is a fixed version (Now works on mobile): http://jsfiddle.net/8cwgpwdk/11/

Upvotes: 1

Related Questions