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>
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!
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