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! 
/ Curting
Here is my public share link: LINK
(how to access public share link)