Lightbox, CMS, Lightbox groups - custom code

Community Help
#1

Hello,

i created a gallery with collection list and custom code: The endresult is that i can click on one image and only images of this group will appear and the group name is set by the list name.

So as you can see in the video below there are projects from an architect and each project has a different lightbox group.

Video:

THE PROBLEM:
I had to use several image collection fields for each image. I couldnt set it up with multi-image field.
The Lightbox want to display image fields where isnt an image set. So thats why in the video appeared an infinite loading icon and also at the bottom overview in the lightbox you can see the black box.

For the custom code i had to use the following code/picture:

<style>
.hide-image {
display:none;
}
</style>
<a class="w-lightbox" href="#">
  <img src="IMAGE 1 FIELD" />
  <script class="w-json" type="application/json">
    {
      "group": "GROUP NAME FIELD", "items": [{
        "_id": "57e0683ebfc7a6d0523235b2",
        "cdnUrl": "IMAGE 1 FIELD",
       "type": "image",
       "url": "IMAGE 1 FIELD"
      }]
    }
  </script>
</a>
<div class="hide-image">
<a class="w-lightbox" href="#">
  <img src="IMAGE 2 FIELD" />
  <script class="w-json" type="application/json">
    {
      "group": "GROUP NAME FIELD", "items": [{
        "_id": "57e0683ebfc7a6d0523235b2",
        "cdnUrl": "IMAGE 2 FIELD",
       "type": "image",
       "url": "IMAGE 2 FIELD"
      }]
    }
  </script>
</a>

<a class="w-lightbox" href="#">
  <img src="IMAGE 3 FIELD" />
  <script class="w-json" type="application/json">
    {
      "group": "GROUP NAME FIELD", "items": [{
        "_id": "57e0683ebfc7a6d0523235b2",
        "cdnUrl": "IMAGE 3 FIELD",
       "type": "image",
       "url": "IMAGE 3 FIELD"
      }]
    }
  </script>
</a>

code
code.JPG805×637 41.8 KB

So how can i get this fixed, that the lightbox dont show the image fields that arent set with an image ?
Maybe someone know a custom code that i can use for it. Something like that check if the image is set. If not then dont allow to display it in the gallery. I dont know im not a programmer. But i really really hope that someone can help me here. Its very important for me! :slight_smile:

Here is my public share link: https://preview.webflow.com/preview/juelicher-ingenieure?utm_medium=preview_link&utm_source=designer&utm_content=juelicher-ingenieure&preview=c4c2e5b2f24916d77f24ae650ec0eb32&mode=preview

1 Like
#2

Hi @Pixelgiant! I’ll take a closer look this weekend. Until then, you may increase your luck by posting this in the Webflow forums as well. :+1:

I’m curious, why didn’t the multi-image field work for you?

#3

With the multi image field, i also wasnt able to create groups out of a collection list like “get group name from…”

i would like to have for each project one lightbox group. So when i click on one project, only pictures from this project are in the lightbox feature. And when the client add an project with img it should automatically added to the gallery.

I mean if its possible to archive what i want with multi image field, then i dont need this custom code. Maybe i did something wrong, i dont know. But as i saw and tested, i cant archive it without custom code.

1 Like