Lightbox and cms

Design help Custom code
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
code805×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: Webflow - juelicher-ingenieure

2

Basically you want to check for empty lightbox thumbnails and then remove them from the DOM.

This jQuery should do it.

<script>
$(document).ready(function() {
	$('.w-lightbox > img').each(function(index,val){
    if( $(this).attr('src') == ''){
    $(this).parent().remove();
    }
  });
});
</script>
3

Okay Thank you very much!!!

Where do i need to paste this code in? Before all the img tags ?

4

JQuery code is dependent on jQuery. That is loaded by Webflow just above the “Before Body Close” custom code area. Put it there.

5

i put it first of all in the before body close tag and it didnt work. i also posted it in head tag for testing, but it dont work either. The black boxes are still there and the lightbox are still trying to load the images that doesnt exist.

code%202
code%2021162×864 64 KB

6

I created the code based on the code in your PM you sent. It needs to be updated. On a call. Will return.

7

my read only link: https://preview.webflow.com/preview/juelicher-ingenieure?utm_medium=preview_link&utm_source=designer&utm_content=juelicher-ingenieure&preview=c4c2e5b2f24916d77f24ae650ec0eb32&mode=preview

On “projekte” u can see the custom code, if it helps

8

Back. I just looked at the published project. Give this a go.

<script>
$(document).ready(function() {
	$('.w-lightbox-item:not(:has(.w-lightbox-img))').remove();
  });
</script>
9

Hey mate,

it didnt work. The black boxes and the loading bug are still there.

10

Here is a codepen pen that shows the script working on HTML from your site that I used that to base the script against. You can see the HTML in the pen.

It was very specific to a certain structure and class names. I notice you have different structures on that page now. So either you adjust the script or the source. No moving targets please. I did not bother to look at every one of your implementations. If you need me to, contact me for freelance work.

Personally I don’t use the Webflow lightbox as a photographer or for client galleries outside of page templates (lack of control), and leverage alternatives instead.

11

@Pixelgiant -
The problem with the script is that the elements don’t exist on the page until the lightbox is displayed, since they are dynamically created from the JSON embedded in the page.

I don’t have a workaround for that at this time and not sure it is worth the effort, since this is not really a supportable approach anyway.

Things to consider. The ability to use multi-image fields from a normal collection list (not on a template page) is a planned feature coming. This is a reason I have never bothered with this and use other approaches.

I did test loading a galley from the corresponding template via Ajax. I got that to work but need some time to work around some issues with that approach. Not sure if it is even worth the effort. You are trying to save one click instead of two (link of image goes to project page, and then next click loads the lightbox).

This is a big issue for many people right now. As I said I use a completely different approach ( Images are on CDN, a JSON file is there too, referenced in the collection item. I just pull the images URI’s in via a script and display them using Fancybox. Wish I could be more helpful.

12

Okay, thank you very much for your help! ive got few questions:
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. And when the client add an project it should automatically added to the gallery with a lightbox group.

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 also cant archive it on a template page right ?

If it isnt possible with a template page, what are my options to archive it? The client want to have it like that, so i have to find a way to get it done :confused: