Limit number of images in a dynamic lightbox element to 4

Hello Webflow champions
I have a collections list and inside of that collection list I have a lightbox element that has 6 - 8 images, but i only want to show only 4 images on the published site, and when the user clicks on one of the 4 images they can navigate through all images. I’ve tried a bunch of custom code solutions but nothing seems to work, any help would be appreciated.
Thank you!

https://preview.webflow.com/preview/prime-estate?utm_medium=preview_link&utm_source=designer&utm_content=prime-estate&preview=7d816df3d26863146d8d05db3e37c79d&pageId=65c5092c5238f7c2c2d78dc0&itemId=65c555c47aa7bef218b97a9a&locale=en&workflow=preview

@ memetican, I hope that you can help

The lightbox is built from your collection list, so you would just set the limit on that collection list to show 4 items.

memetican That is the problem, i don’t have any limit option in the settings panel


The collection list is inside of the CMS template page

Found the solution.
Paste this code in the “Before body tag” IMPORTANT, either on the page or in the site settings.

<script>
// Select the wrapper element containing all images
var wrapper = document.querySelector('.collection-list');

// Select all image elements within the wrapper
var images = wrapper.querySelectorAll('img');

// Set the maximum number of images to display
var maxImagesToShow = 4;

// Loop through all images and hide the ones beyond the maximum limit
for (var i = maxImagesToShow; i < images.length; i++) {
    images[i].style.display = 'none';
}
</script>

change .collection-list with the class of your collection list, also change maxImagesToShow = 4 with the number of images you want to show.

Hope It’ll help

Hi @Hadi_Aslam @memetican ! Similar issue here.

I need two different lightboxes (on the same page) to show different images from the same multi-image field. I need to not only limit the number shown on each collection list, but also set at which image’s number the second collection list should start. For example:

LightboxA’s collection list: showing 1 item, starting at 1 and
LightboxB’s collection list: showing 24 items, starting at 2

Is there any way to achieve this?

I don’t understand why it’s possible to set limits to a collection list on a static page but not on a dynamic collection page. Any help with this problem will be appreciated!

Yes but it’s likely a bit tricky due to the fact that you’re using a lightbox.

If it were simply two collection lists showing a range of images from a multi-image field, I’d use custom CSS and nth-child. Both collection lists would contain the full set of image, but the first one would hide images 2+, and the second one would hide image 1.

In a combined lightbox scenario, you’d likely get 50 items, each duplicated twice.

It would probably mechanically work find to have two groups, since each would likely pick up its full range of 25 items. I’d try that first.

The alternative is to use JS to prune those unwanted items, and then reset the lightbox so that it re-initializes without them, however it is likely overkill and would require some experimentation.

1 Like

Thank you Michael. The second sounds a bit complicated, but I’ll discuss it with the developers team

The nth-item approach is simple to use, just 2 small CSS rules in your case. Your dev team should homerun that.

1 Like

@Hadi_Aslam I have tried this and it does not work. Can you help me out with this and why it doesn’t work? Maybe it has to do with the .collection-list, I’m Thinking. I have used the class name and have even changed it to test. Nothing works. Please help!