Nested unlimited images from your multi-image collections field on any static pages in our Webflow project
An easy and lightweight way to nest unlimited collections with unlimited collection items or images from a multi-image field on any single or dynamic page in Webflow is to use a (simple) jQuery code snippet. In basic, the jQuery pulls a multi-reference element from any page into an HTML embed, that works like a nested collection.
You can set up and style your nested collections with images from the multi-image field in your collection wherever you want and use them wherever you want!
This solution is based on the jQuery .load() function - a simple way to fetch data from a server and place the returned HTML into a matching element.
Create a hidden section with a collection list on the template page of your CMS collection with the multi-image field and give the collection list wrapper an individual class. The collection list wrapper will serve as the nested collection on your static pages and the class you've given to it serves as the indentifier to fetch the element with the jQuery .load() function.
Insert the following jQuery code snippet with an HTLM embed into the collection list on your static page.
For more details about nested collections with jQuery .load() visit the main project "Multiple nested Collections on a single page. Inspect the blog example or read the short documentation to start from scretch.