Owl Sync Sliders Gallery in ModX with Fancybox 3

Create 2 sliders one for thumbnails, one for large images and sync them up using Owl Carousel and also include the fancybox popup image slideshow.

galleryTpl:

    <div class="gallery">
         <div class="big-images owl-carousel">
              [[Gallery? &album=`[[*gallery]]` &thumbTpl=`galleryPageTpl` &thumbWidth=`870` &thumbHeight=`458` &imageWidth=`2000` &imageHeight=`2000` &imageQuality=`100` ]] 
         </div>
        </div>
        <div class="gallery-nav">
          <div class="small-images owl-carousel">
               [[Gallery? &album=`[[*gallery]]` &thumbTpl=`galleryPageThumbTpl` &thumbWidth=`150` &thumbHeight=`100`]]

          </div>
         </div>
      
galleryPageTpl: 

       <div class="gallery-main-img"><a href="[[+image]]" data-fancybox="gallery" data-caption="[[+pagetitle]]"><img src="[[+thumbnail]]" alt="[[+name]]"></a></div>

galleryPageThumbTpl:

        <div><img src="[[+thumbnail]]" alt="[[+name]]"></div>  
  

<script>
$(document).ready(function(){ 
var sync1 = $('.big-images'),
    sync2 = $('.small-images'),
    duration = 300,
    thumbs = 6;
// Sync nav
sync2.on('click', '.owl-next', function () {
    sync1.trigger('next.owl.carousel')
});
sync2.on('click', '.owl-prev', function () {
    sync1.trigger('prev.owl.carousel')
});
// Start Carousel
sync1.owlCarousel({
    rtl: true,
    center : true,
    loop: true,
    items : 1,
    margin:0,
    nav : false
})
.on('dragged.owl.carousel', function (event) {
        if (event.item.index == 'left') {
            sync2.trigger('next.owl.carousel')
        } else {
            sync2.trigger('prev.owl.carousel')
        }
});
sync2.owlCarousel({
    rtl: true,
    center: true,
    loop: true,
    margin:10,
    items:thumbs,
    nav : true
})
.on('click', '.owl-item', function() {
    var i = $(this).index()-(thumbs);
    sync1.trigger('to.owl.carousel', [i, duration, true]);
    sync2.trigger('to.owl.carousel', [i, duration, true]);
});
   $(".gallery-main-img a").fancybox({ //fancybox initaliser
       margin:0
     });
});
</script>

<!--Gallery-->
  <div class="container-fluid">
     <div class="container">
        [[$galleryTpl]]
     </div>
  </div>
<!--/Gallery-->

.gallery{padding:10px 0;}
.gallery-nav{padding-bottom:10px;}
.gallery-nav .owl-item.active.center {border:solid 3px #0094ff;}

/*Optional Nav Arrow Styles*/
.small-images > .owl-nav > div{display:block;float:left;width: 23px;height:0;padding-top: 23px;margin: 0 auto;background-position:center top;background-repeat:no-repeat;background-size:80% 100%;overflow:hidden;}
.small-images > .owl-nav > div:hover,.small-images >  .owl-nav > div:active,.sub-banner >  .owl-nav > div:focus{background-position:center bottom;}
.small-images > .owl-nav > .owl-prev{background-image:url(../images/icon_wht_arrow_left.png);position:absolute;left:0;bottom:40%;left: -27px;}
.small-images > .owl-nav > .owl-next{background-image:url(../images/icon_wht_arrow_right.png);position:absolute;right:0;bottom:40%;right: -27px;}

@media only screen and (max-width: 767px){
    .small-images > .owl-nav > div{width: 23px;height:0;padding-top: 23px;}


}