Hacking Webflow lightbox to work with collections

In October 2015, webflow launched a long awaited feature to populate pages using collections of dynamic data. We decided to use this feature to implement a project gallery for buildzig.com, one of our clients’ websites. We created two collections, Projects, and Gallery Images, linked through a Multi-Reference field.

Here is what the data structure looks like for the Projects collection:

Creating the project template page itself was fairly straightforward and worked like a charm. Here is what a project page looks like:

The page was designed with a full-bleed hero image on top and a filmstrip of thumbnails right below it. The design also called for a Lightbox to pop up whenever a thumbnail image was clicked. So we decided to create a webflow Lightbox widget for displaying each of the dynamic thumbnails, which were pulled from the “Gallery Images” multi-reference collection. The HTML structure looks like this:

So far so good. However, problems arose when we tried to configure the webflow Lightbox link. The Lightbox link did not allow to specify an image from the dynamic collection. Instead, it was always set to example-bg.png, which resulted in a lightbox that would only show the example-bg.png image instead of the full size image from my gallery.

This is a big problem as the only other solution was to build out the lightbox manually, which would be a lot of unanticipated extra work. In the webflow forum, I learned that other webflow users also faced this issue, but there was no solution other than building it manually. I was determined to find another solution, so I took a good look at the HTML that was produced by webflow:

The Webflow Lightbox Hack!

I experimented a bit and found that if I replaced the url value of the example-bg.png image with the url of the image I want, the webflow lightbox started to work. So I included the fullsize image as the background-image of the image element, so that I could potentially get this value via custom Javascript. The only challenge then was to automatically replace the url value for each lightbox media element to the url of the background image. This was a task for someone who knows Javascript well. Our extremely talented software engineer Swathi Manthalapu, figured out how to achieve this using some custom Javascript:

//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);
}

Note that we created a class called “lightbox_thumbnail_image”. This custom Javascript worked like a charm and now the webflow lightbox works perfectly with a dynamic collection! Many thanks to Swathi for hacking the webflow lightbox!