Add Fancybox Popup in Image Gallery

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.1/jquery.fancybox.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.1/jquery.fancybox.min.js"></script>
<script>  
 $(window).load(function() {
   if ( $('.row1-content-careers ').length == 1 ){
     $('.row1-content-careers .hs_cos_gallery .slick-slide-inner-wrapper').each(function(){
       var imgSrc = $(this).children('img').attr('src') || $(this).children('img').attr('data-lazy');
       var imgAlt = $(this).children('img').attr('alt');
       $(this).children('img').wrap('<a href="'+ imgSrc +'" data-fancybox="images" title="' + imgAlt + '"></a>');

     });
   }
 });

 $(document).ready(function(){
   $('[data-fancybox="images"]').fancybox({
     margin : [44,0,22,0],
     arrows:true,
     loop: true,
     thumbs : {
       autoStart : true,
       hideOnClose : true,
       axis      : 'x'
     }
   })
 });

 $(window).load(function(){
   $('a[data-fancybox]').on("click",function(){
     setTimeout(function(){
       $('button.fancybox-button.fancybox-button--thumbs').click();
     },0);
   });
 });

</script>

<style>
 @media all and (min-width: 800px) {
   .fancybox-thumbs {
     top: auto;
     width: auto;
     bottom: 0;
     left: 0;
     right : 0;
     height: 95px;
     padding: 10px 10px 5px 10px;
     box-sizing: border-box;
     background: rgba(0, 0, 0, 0.3);
     display: block !important;
   }

   .fancybox-show-thumbs .fancybox-inner {
     right: 0;
     bottom: 95px;
   }
   .fancybox-inner .fancybox-navigation {
     display: block !important;
   }
 }

</style>