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

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

demo: https://codepen.io/fancyapps/full/gdVyxg

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.

Licenses

From $29.
https://fancyapps.com/fancybox/3/#license

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

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

image

Step 3/4 - Add embed html to collection item

1
copy-paste inside this code:

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

2
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="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></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 : {
   //...rest of the code

Copy-Paste before body

Copy-paste (Fancybox install with custom options):

<!-- fancybox3 assets -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<!-- fancybox3 install  -->
<script>
$('[data-fancybox]').fancybox({
  // 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: [
    //"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",

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

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 -->
<script>
  $("[data-fancybox][href='']").remove();
</script>
10 Likes

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: https://preview.webflow.com/preview/turnturn-dressing-room?utm_medium=preview_link&utm_source=designer&utm_content=turnturn-dressing-room&preview=bb5ddb9881274adc10d26c5ba8fac976&pageId=5e714e157024e60231609d86&itemId=5f3871cb9d587765b45b7a6a&mode=preview

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?

Regards
Klaus

@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