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)
}
});
});