Help implementing Fancybox

Design help Custom code
1

Hi Guys,

I am trying to customize the fancybox into webflow and run into some blocks:

  • By default, the image size of pictures are constrained to their original size. I would like to make them cover or fullscreen as mentioned in their docs: Images | Fancybox
const options = {
  Images: {
    initialSize: "fit",
  },
};
  • Since I am using the CMS and want to display 3 projects in a row, I need to limit itens to 1 so it just shows the first one. But filtering the collection will not display the other project photos within the fancybox.

Can someone help ?

Here is the code:

<!-- FANCYBOX CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

<style>

  .fancybox-thumbs__list a {
    border-radius: 4px !important;
  }
  
  .fancybox-thumbs__list a:before {
    border: 6px solid #16232e !important;
    border-radius: 4px !important;
  }
  
  .fancybox-progress {
    background: #00a9e4 !important;
    height: 4px !important;
  }
  
</style>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script>

  // SETS CAPTION AND SRC OF MAIN IMAGE
  $(".lightbox-link").each(function( index ) {
    $(this).attr({
    	"data-fancybox": "gallery",
      href: $(this).find("img").attr('src'),
      "data-thumb": $(this).find("img").attr('src'),
      "data-caption": $(this).find("img").attr('alt')
    })
  });

	// INITIATE & CONFIGURE FANCYBOX OPTIONS
  $(".lightbox-link").fancybox({
    // For more info go to https://fancyapps.com/fancybox/3/
    loop: true,
    arrows: true,
    infobar: true,
    thumbs: {
      autoStart: true, 
    },
    slideShow: {
      autoStart: true,
      speed: 3000
    },
    mobile: {
      arrows: true,
      thumbs: {
        autoStart: false
      },
     Images: {
   		 initialSize: "cover",
 		 },
    },
    
    buttons: [
      // "zoom",
      // "share",
      "slideShow",
      // "fullScreen",
      "download",
      "thumbs",
      "close"
    ],

    // Open/close animation type
    // Possible values:
    //   false            - disable
    //   "zoom"           - zoom images from/to thumbnail
    //   "fade"
    //   "zoom-in-out"
    animationEffect: "zoom",
    animationDuration: 700,
    // Transition effect between slides
    // Possible values:
    //   "false"  - disable
    //   "fade" "slide" "circular" "tube" "zoom-in-out" "rotate'
    transitionEffect: "fade",
    transitionDuration: 700,
    // Goes to next image on click - rather than zoom
    clickContent: function(current, event) {
      return current.type === "image" ? "next" : false;
    }
  });  


</script>

Here is my site Read-Only: [LINK][1]
([how to share your site Read-Only link][2])

[1]: http://](Webflow - Vogue Grange
[2]: https://university.webflow.com/article/sharing-your-sites-read-only-link