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

Design help Custom code
2

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