Dynamic Lightbox with CMS Workaround - Works Perfectly

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)

  1. Here’s a dynamic service page with a gallery - http://mullane-dental-1.webflow.io/service/dental-implants
  2. And here’s the gallery where all the images are amalgamated - http://mullane-dental-1.webflow.io/gallery

Here’s how I did it:

  1. I created a Service collection

  2. I created a Gallery Images collection with a multi-reference to the Services collection

  3. On the services template page, I inserted a dynamic list and linked it to the Gallery Images collection

  4. I filtered it to only show the current service

  5. I inserted a lightbox element and named its classes as in the image below

  6. I then set up the lightbox image settings as so

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

  1. I created a captions field in the Gallery Images collection

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

  3. Then click on image-placeholder.svg in the lightbox settings

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

  5. 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>
  1. 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

10 Likes

Thanks @Diarmuid_Sexton I checked out some of your other sites, great looking stuff.

1 Like

Thanks Jeremy! I’m reading, looking, learning, experimenting, working and getting better all the time…I think!

1 Like

Did your lightbox on the site stop working, I can’t seem to figure out what happened but mine doesn’t seem to work anymore. Now the live site doesn’t grab anything from before. Maybe I did something stupid but I can’t figure it out.

I don’t even have several collections just one I am referencing. Gallery Images

Jeremy

share link here maybe I’m doing something but I can’t figure it out

https://preview.webflow.com/preview/jane-avery?preview=00187bee6d03cb933377e7b913530e8e

live site http://jane-avery.webflow.io

Hi @jbleroux, it looks like the gallery media images are pointing at the example placeholder image:

The lightbox is working as it should, but there is an error in the custom script on the page:

Looks like it is coming because the URL is undefined:

I hope this helps track down the issue.

To remove empty lightbox thumbnail, use this piece of javascript

//DELETE EMPTY LIGHBOXES THUMBNAILS
$('.gallery-lightbox-link:not(:has(.lightbox_thumbnail_image))').remove();

I found a really simple work around which you can check out here if you’re still working on this: Full CMS Lightbox!

2 Likes

thanks orams i am going to try this simpler workaround the next time I do this. I finished the old way.

This is by far the BEST way to implement a cms lightbox. Works perfectly and captions display correctly formatted. Thank you so much @Diarmuid_Sexton

Thanks @CooperX - having a rough / slow day in the office. The gesture appreciation has lifted my spirits somewhat!

1 Like

Anyone know how to replicate this for a slide out sidebar? Trying to figure out how to connect the dynamic item link block/button to open the correct dynamic content.

Similar to the screenshot.

what is your share link? The dynamic content has to be created in your collections. Doesn’t look like a slider solution, but a div with dynamic content that opens using interactions. Although it is hard to tell from a screenshot.

That’s a screenshot from moneysupermarket.com :wink: not my website. Already tried the div with dynamic content, wouldn’t display the right content.

supply share link to your site if you would like help. Did you set up your collection with all of the content? Then for each item you need to select the dynamic content. And then possibly use conditions. But impossible to see without share link for your site. If unsure about the share link instructions are in a sticky post at top of the forum.