Hi Webflow Community!
Due to several requests in connection with my Multiple Nested Collection project I have created another cloneable project to show how you can display more than 5 images from a multi-image field that is part of a collection as a nested collection on any static page in your Webflow project.
Live website: https://nested-collections-multi-image-gallery.webflow.io/
Clonable: https://webflow.com/website/nested-collections-multi-image-gallery
The nested image gallery also works with lightbox but you have to use a custom code solution for the lightbox (not the native Webflow solution). I have updated the clonable project with a special (lightbox solution). You can taste this out on the live website: Gallery (Lightbox)
Hi,
Love this workaround! But I can’t seem to get it to work.
I find I did everything as in your example website. But obviously I’ve missed something. Do you know what went wrong?
The HTML Embed section is in the page “Kuvagalleria” and under “Multi-Image Gallery jQuery” heading. The CMS page is called “Images Template”. CMS collection name is “Images”.
Check again if you wrote in the embeded the class that goes for the “Collection List Wrapper” the first parent of the collection list element.
Thanks to the author for the code, BUT it does not work with CMS Load (finsweet). When loading new collection items, the code does not work.
And what is most interesting on the Internet there is not a single “crutch” for loading multi-image more than 5 elements in a nested collection.
I’ll leave the solution here, if anyone needs it:
<div class="item-gallery_wrapper" data-slug="{{wf {"path":"slug","type":"PlainText"\} }}"></div> <!-- Your Slug -->
<script>
function loadContent(element) {
var slug = element.getAttribute('data-slug');
var targetId = 'portfolio-' + slug; // Your collection link, "-" at the end leave!
element.setAttribute('id', targetId);
element.removeAttribute('data-slug');
// Between "/" your link is collection + class, don't forget in front of it " ."
jQuery('#' + targetId).load('/portfolio/' + slug + ' .item-gallery_wrapper');
}
function loadContentForVisibleItems() {
// Before "[data-slug]" your class
var items = document.querySelectorAll('.item-gallery_wrapper[data-slug]');
items.forEach(function(item) {
if (isElementInViewport(item)) {
loadContent(item);
}
});
}
function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
document.addEventListener('DOMContentLoaded', function() {
loadContentForVisibleItems();
window.addEventListener('scroll', function() {
loadContentForVisibleItems();
});
});
</script>
@PhilippX
Hello!
I want the main photo to also be displayed in the general group of lightboxes. How can this be implemented?
Thanks for your Input, but I don’t really understand how i can get this working…I also don’t understand how to link them.
Maybe if you have time could help me out!