Streaming live at 10am (PST)

Webflow [new] Multi-ref feild CMS & fancyBox3.js gallery

Someone write to me in private - so her is the solution for all users.


fancybox3 is one of three best JS gallery plugins out there (The other: photoswipe(For advanced) & lightgallery).

  • Support Touch gestures (Pinch to zoom and so on)
  • Vertical swipe to close gallery
  • Keyboard support
  • History mode: Add #hash to url (Back button on mobile/desktop = close)

Fancybox3 - Mobile optimized gallery - JavaScript lightbox library for presenting various types of media. Responsive, touch-enabled and customizable.


From $29.

Very Short guide

Basic Webflow CMS knowledge is required to install. Start here: Webflow university CMS.

Step 1/4 - create feild

Create multi-image field + upload some images

Step 2/4 - Add collection list + Bind the feild

Navigate to - Collection page => Post
Add collection-list + bind to gallery


Step 3/4 - Add embed html to collection item

copy-paste inside this code:

<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>

Bind href + src to webflow Feild (Right corner add feild button)

Step 4/4 [Option 1/2] - Install default setting

custom code --> copy-paste before body

<!-- fancybox3 gallery -->
<link rel="stylesheet" href="" />
<script src=""></script>

Step 4/4 [option 2/2]- install with custom fancybox options:

Full list (+ docs):

Edit list (I remove most options - this is ± what i use most of the times -):

  • UI button Example: - How to remove zoom button => comment the option (or uncomment to add).
//    "zoom",
  • mobile - under “mobile” hide arrows and thumbs (Build-in option to set diff options on mobile).
mobile : {
    thumbs : {
   // of the code

Copy-Paste before body

Copy-paste (Fancybox install with custom options):

<!-- fancybox3 assets -->
<link rel="stylesheet" href="" />
<script src=""></script>
<!-- fancybox3 install  -->
  // Enable infinite gallery navigation
  loop: true,
  // Should display navigation arrows at the screen edges
  arrows: true,
  // Should display counter at the top left corner
  infobar: true,
  thumbs: {
    autoStart: true, // Display thumbnails on opening
  mobile : {
    thumbs : {
        autoStart: false
    arrows: false,
  // What buttons should appear in the top right corner.
  buttons: [
  // Open/close animation type
  // Possible values:
  //   false            - disable
  //   "zoom"           - zoom images from/to thumbnail
  //   "fade"
  //   "zoom-in-out"
  animationEffect: "zoom",

  // Transition effect between slides
  // Possible values:
  //   false            - disable
  //   "fade'
  //   "slide'
  //   "circular'
  //   "tube'
  //   "zoom-in-out'
  //   "rotate'
  transitionEffect: "fade",
  /* zoom VS next////////////////////
  clickContent - i modify the deafult - now when you click on the image you go to the next image - i more like this approach than zoom on desktop (This idea was in the classic/first lightbox) */
  clickContent: function(current, event) {
    return current.type === "image" ? "next" : false;

SEO con:

No way to add alts for now (Webflow missing the feature of binding alts/captions).

remove empty images/url

***someone writes me in private. If you want to remove “empty” images copy-paste this code before body:

<!-- remove images without URL -->

Thanks for sharing @Siton_Systems :webflow_heart:

1 Like

Hey guys, I implemented fancybox into my product template page, but the gallery is not displaying the correct variant images.

See read-only site:

If you select a different color (like “Black”), the gallery repeats the same image over and over (and not even the correct color).

Does anyone know what could be going wrong here? Is there a way to hook the fancybox gallery up to the right variant images?

As always great Help!!! Do you think its possible to add lazyload to the fancybox in webflow?


@Klaus_Dyba - The linked assets are loaded by the Fancybox script, not the browser on page load.

Yes i know i need some code. I think i figured it out.

Is webflow internal lazy load also working for cms / multi image galleries?

Then i might try the webflow lightbox. Not the best draggable feeling but if its loading faster its more important.

Desktop version of wip