CMS Lightbox Gallery - Hidden & Duplicated Image Issue

Dear Webflow Community,

I’m building a car leasing website for a client. Each car in the cars collection contains 17 images. My plan is to show 3 of them on the page and allow the user to browse all of the 17 through the lightbox feature. Here’s where I need your help. This is the design:

Challenge 1: How do I show images in a range?

As you can see, I had to create two lightboxes in order to have a layout consisting of one large image and two smaller images. When you click on any of the images, then the lightbox will show the following images: [1, 1, 2]. This is the first issue. How do I show the collection lightbox with the smaller images from the 2nd image and onwards? I can only limit it but not define a range like I’m used to with collection items?

The end result should be the images showing [1, 2, 3] and the lightbox being the same.

Challenge 2: How do I show all images from a collection in the lightbox?
The lightbox is limited to the images shown on the page. In order to only show 3 images and the remaining 14 (17 images in total) images in the lightbox I can add another lightbox with display:hidden and linking it to the existing two lightboxes. In that way all the images will be there, but the lightbox will now present images as [1, 1, 2, 1, 2, 3, 4, 5, …] as shown here:

How do I achieve showing only the first 3 images to the user and all 17 images in the correct order ([1, 2, 3, 4, 5, …]) in the lightbox?

I’d appreciate any help I can get. Thank you in advance! :smile:

/ Curting


Here is my public share link: LINK
(how to access public share link)