Lightbox collection repetition issue

Hello, I want to create a property page with multiple links to the same lightbox without repeating the collection.


Currently on the page there is the “view all” button which opens all property images including the 4 shown on the screenshot. But they are two separate fields in the cms template. The 4 images shown are Hero image (large one) and secondary images (3 vertical) with the lightbox link opening a separate cms multi-image field with these 4 images included in that too.

I want to make it so that the 4 images shown can be clicked and open the lightbox with the respective image in the same sequence while the “view all” opens the same collection with all property images. I tried making it like that but the lightbox for the 4 images is repeating before the image set of the “view all” lightbox button.

Any help will be appreciated and I’m not very well versed with the software so if you can explain in simple terms that would be great. Thanks!


Here is my site Read-Only:
https://preview.webflow.com/preview/zion-stays?utm_medium=preview_link&utm_source=designer&utm_content=zion-stays&preview=c6bc66fab7f3717223261a7b9a76d3d3&pageId=6628b7d6ef8096e5390718cb&locale=en&workflow=preview

I couldn’t see where this is on the page you linked.
However, the lightbox is composed of all of the lightbox elements with the same group name.

That means if you have 1 hero + 3 images + a multi images, and you’ve given all of them the same group name, then you don’t want to repeat those first 4 in the multi-image field or you’ll get them twice.

Sorry maybe this is the correct link
https://preview.webflow.com/preview/zion-stays?utm_medium=preview_link&utm_source=designer&utm_content=zion-stays&preview=c6bc66fab7f3717223261a7b9a76d3d3&pageId=6628acbf87169641f9f6609d&itemId=6644eb1940c732cf19d4c6ec&locale=en&workflow=preview

Let’s take this scenario: link1 shows image1, link2 shows image2, link 3 shows image3 and link4 shows (image1, image2, image3, image4, image5).

Now is there a way for me to include all these links in one section connected so that link1 contains image1 and then in slider also includes rest of the images and does not repeat images which are in link4.

I’m trying to replicate airbnb’s layout of property page if that is a simpler explanation. I just want the button and the images to be part of the same group without repeating any images.

Again, it’s just a lightbox. Avoid duplicating images in the CMS and life will be easier. In your case, the easiest way is likely;

image1 - image field
image2 - image field
image3 - image field
more images - multi-image field

No duplicate images, more images does not repeat 1 2 or 3.

Than you just create and bind your elements / lightboxes on your canvas and give them all the same lightbox group name, and you’re all set.

But then clicking on more images will start from image 4 even though the carousel will contain images 1, 2 and 3 before them but it will start from image 4. I understand this is a particular and not that common use case but is it possible for more images to start with image 1 while the carousel still contains a multi-image field as well without any overlap?

Have you tried it?

If the View all button is a separate element with its own lightbox, you just don’t give it any media. When it has the same group, it will open the group lightbox, but at image 1.

I tried but couldn’t find a solution with my limited knowledge of custom code. A dev in my team is looking into it but will most probably go with the above solution of more images starting with image 4 and so on for an improved functionality than the current design at least.

Thanks for all the help and assistance :)

No worries, you actually don’t need any custom code here, and the lightbox is a somewhat trickier element to manipulate with custom code anyway.