So, I just wanted to publicise this cos I know I struggled with it for a while and only just found out how to do it yesterday.
There’s a way to get the lightbox working perfectly with dynamic images in the CMS (until Webflow release it - I suspect it’s just around the corner as part of the new asset manager???).
This comes courtesy of @Kristian_Widjaja - this is the original post where I picked it up - List items in a Dynamic Collection? Lightbox with CMS? Embedded code? SEO? - #36 by jbleroux - CMS - Forum | Webflow
I used it on a dental website I am designing - to show images of certain services and also to show on the gallery page. (FYi, I customised the lightbox also - removing the thumbnail ribbon along the bottom)
- Here’s a dynamic service page with a gallery - http://mullane-dental-1.webflow.io/service/dental-implants
- And here’s the gallery where all the images are amalgamated - http://mullane-dental-1.webflow.io/gallery
Here’s how I did it:
-
I created a Service collection
-
I created a Gallery Images collection with a multi-reference to the Services collection
-
On the services template page, I inserted a dynamic list and linked it to the Gallery Images collection
-
I filtered it to only show the current service
-
I inserted a lightbox element and named its classes as in the image below
-
I then set up the lightbox image settings as so
-
I then inserted the following piece of code into the footer code in the site settings
<script>
//populates url for lightbox
var scriptLightBox = document.getElementsByClassName("w-json");
var urlValue = document.querySelectorAll("img.lightbox_thumbnail_image");
for(j=0;j<urlValue.length;j++) {
var jsonParse = JSON.parse(scriptLightBox[j].text);
var url = urlValue[j].style.backgroundImage;
actualUrl=url.replace('url(','').replace(')','').split("\"").join("");
var obj=jsonParse.items[0];
obj.url=actualUrl;
scriptLightBox[j].text=JSON.stringify(jsonParse);
}
</script>
- Then publish the site! That’s it - lightbox working!
In the above example, I also added dynamic captions. You can see how I did in the above images It’s a very similar process -
-
I created a captions field in the Gallery Images collection
-
When I was setting up the lightbox image settings, I set the image to get the alt text from the captions field in the gallery
-
Then click on image-placeholder.svg in the lightbox settings
-
A pop up will appear. Put anything you like in the caption field i.e. “Filler text”. This need to be done, otherwise the captions will not show at all.
-
Paste the following into the footer code of the site settings
<script>
//populates url for caption
var scriptLightBoxCaption = document.getElementsByClassName("w-json");
var captionValue = document.querySelectorAll("img.lightbox_thumbnail_image");
for(j=0;j<captionValue.length;j++) {
var jsonParse = JSON.parse(scriptLightBoxCaption[j].text);
var caption = captionValue[j].alt;
actualCaption=caption.replace('url(','').replace(')','').split("\"").join("");
var obj=jsonParse.items[0];
obj.caption=actualCaption;
scriptLightBoxCaption[j].text=JSON.stringify(jsonParse);
}
</script>
- Then publish the site! That’s it - lightbox and caption working dynamically in the CMS!
Here’s the preview link to my website if you’d like to go in and poke around and see how it’s configured - https://preview.webflow.com/preview/mullane-dental-1?preview=835a96714f1a120ff4376fd7b3b55f08
FYI - all the footer code is in the site settings so that it work across the whole site. You won’t find it in the footer of the services template page!
Any questions, just ask. Thanks
not my website. Already tried the div with dynamic content, wouldn’t display the right content.