Fancybox callback to move owl carousel to fancybox index #

时间:2019-04-08 13:28:11

标签: jquery callback fancybox owl-carousel

I'm trying to combine the Fancybox lightbox with an owl carousel.

Within all image links I have: -

data-fancybox="gallery"

triggered via: -

$(function () {
    $('[data-fancybox="gallery"]').fancybox({
        buttons: [
            "close"
        ],
        loop: true
    });

And I know I can programatically move the owl carousel to an item (e.g. #4) using: -

$('#thumbGalleryDetail2').trigger('to.owl.carousel', 4)

Everything works OK but I'd like the owl carousel to move to the last viewed image in the fancybox. I gather I need a callback from fancybox for this, but am unsure how to do it and there isn't much documentation on callbacks from fancybox. I can't even get a simple console.log to work on closing fancybox and I've tried a lot of different examples.

One complication, if it can work, is that the fancybox index starts at 1 and the owl index starts at 0, so the fancybox callback would have to be to it's index -1.

Any help would be much appreciated!

Edited to add solution: -

$(function () {
    $('[data-fancybox="gallery"]').fancybox({
        buttons: [
            "close"
        ],
        loop: true,
        afterShow : function( instance, current ) {
            // console.log(current.index);
            $('#thumbGalleryDetail2').trigger('to.owl.carousel', current.index)
        }
    });
});

0 个答案:

没有答案
相关问题