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
2.2
Add collection-list + bind 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):
Edit list (I remove most options - this is ± what i use most of the times -):
UI buttonExample: - How to removezoombutton => 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>
