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.

demo: https://test-c0d8d3.webflow.io/blog/dolor-earum-id

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)

https://fancyapps.com/fancybox/3/

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 the list to gallery

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):
https://fancyapps.com/fancybox/3/docs/#options

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).

5 Likes

Thanks for sharing @Siton_Systems :webflow_heart: