Is ther a way to change Lightbox BG Image with javascript?

I have a page with multiple lightboxes on it. Works as expected
LightBox Link then a light box image nested inside.

Thing is I don’t want to set the background image to the picture the light box needs to show. I would just set it to the default.

Isn’t there a way in javascript to replace the background image with the image inside the lightbox?

I know someone did something similar for a dynamic lightbox. But have no idea how to get this to work when I am statically placing all the lightboxes.

So I actually figured it out. Let me explain why I wanted to do this:
I wanted to do this because if you create a gallery and allow users to click on the images to get to see them larger in a lightbox you have to manually set the image that pops up. This is a problem if your client changes an image in the gallery. When they change one then they have to call you and have you change the image that pops up. Not very convenient.

So heres what I did: I actually used the custom javascript from the Dynamic Lightbox post. Here

Here is the code from that post

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

After looking at the source once it was published I found that i only need change one thing on one line of code:

    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;
      actualUrl=url.replace('url(','').replace(')','').split("\"").join("");
      var obj=jsonParse.items[0];
      obj.url=actualUrl;
      scriptLightBox[j].text=JSON.stringify(jsonParse);
    }

So this line var url = urlValue[j].style.backgroundImage
Became this var url = urlValue[j].src

This basically said replace the bg image with the image in the lightbox link. Worked perfect!

1 Like

2+ years later and your solution is still helping!

I was surprised webflow doesn’t let clients update the content of the Lightbox natively. It just makes light of not suitable for client work.