The Jonajo Blog

Hacking Webflow lightbox to work with collections

webflow lightbox with collection end result

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:

webflow collection with multi-reference field

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

Project Page in BuildZig Media Gallery

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:

webflow lightbox in dynamic collection

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.

webflow lightbox settings

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:

webflow lightbox generated html

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!

webflow lightbox end result

 

About author View all posts

Kristian Widjaja

Kristian Widjaja is the Founder and President of Jonajo Consulting. He has over 20 years of experience in Silicon Valley companies such as Oracle, PayPal, and various startups.

7 CommentsLeave a comment

  • Hi! this is a really cool hack!… it works!… but for me only with the thumbnail, i just can´t get the lightbox to load my images group… how did you guys do that!? it would be awesome if you can share the Gallery Images collection structure… it would be great!!

  • Works great, thanks!
    The only update seems to be that the element uses the “src” and not the “style.backgroundImage” anymore?
    It’s also worth mentioning that the whole thing works only if you set the source image to be the default example image at least (or any image for that matter), if you leave the blank at “no media” then the JSON is not generated so there’s nothing to parse.
    Thanks again!

  • This hack is fantastic! I have a mix of both vertical and horizontal aspect images, so my filmstrip looked kinda jacked up, so I set my images as a background image (set to cover) so I could have consistent size thumbnails.

    The only problem here is the placeholder image shows up on top of the background image. So I just created a transparent placeholder PNG and uploaded that as the image in the Image Properties section. Works like a charm!

    Thanks so much for sharing this!

  • Just my two cents!
    Had to change the function a bit, since I used a picture. This is what I included before my closing body tag.

    (function() {
    //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].src;
    var obj=jsonParse.items[0];
    obj.url= url;
    scriptLightBox[j].text=JSON.stringify(jsonParse);
    }
    })();

    Thank you for sharing!

  • thanks!

    here’s what worked for me, hope this helps:

    “`
    //populates url for lightbox
    var scriptLightBox = document.getElementsByClassName(“w-json”);
    var urlValue = document.querySelectorAll(“img.thumb-image”); //replace with your thumb class (inside Lightbox Link)
    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);
    }
    “`

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.