Limiting items on Collection List, But Showing All Items in the Lightbox

Dear Webflowers,

I got a question about the Limit function on a Collection List in combination with Lightboxes. For a client, I made a custom picture gallery for each product they sell in the Webflow eCommerce CMS. As you can see, this individual product has many pictures added to the custom gallery. For a better user experience, I limited the amount of items to 3. If you click on an individual picture on the product page, you will open up the gallery in a Lightbox View. However, I encounter one problem:

  • I can’t add a Limit to this Collection List while still show all items in the Lightbox Gallery. If I limit the Collection List to 3, it will only show 3 items in the Lightbox.

Is there any way to show just 3 items in the Collection List, yet have all pictures show up in the Lightbox Gallery? Much thanks in advance.

The actual page is as following: www.meubelmakerijbinnendijk.nl/product/eiken-tuintafel-praag.

The share link: https://preview.webflow.com/preview/meubel?utm_medium=preview_link&utm_source=designer&utm_content=meubel&preview=f2604d8a49556a14475037cf1934bcb3&pageId=5d42c76a02c75390e76445d2&itemId=5e8f1bfcb28e79d69f489ee5&mode=preview.

Kind regards,

Boaz Tepper
Learning webdesigner

Schermafbeelding 2020-05-13 om 12.45.07

I would like to know too!

Today, I figured out a work-around!

Simple add two Multi-image Fields in the CMS. To one, you add the pictures you want to show on the page. My choice is to show three. To the other, you add all remaining pictures.

Then, create two Collection List Wrappers. Connect your pictures through Lightbox Link and Image items. Set the Display function of the Collection List with the remaining images to None. (Don’t touch the Display of the Collection Items themselves.) Connect all to the same Lightbox name and you’re done!

1 Like

Is there a better solution to this? Seems like I should be able to just limit the amount shown on the page yet still have them show up in the lightbox. I really don’t want to create two Multi-image fields in CMS and then have a jury-rigged setup for 3000 items.

Hey Justin, depends on the specifics of what you’re trying to setup.

Suppose you’re on a CMS collection page, and your item has a gallery field with 25 images. You want to show only 3, but in the lightbox you want to show all 25.

There are two setups for this-

Collection list 1 shows 3 items and is visible
Collection list 2 shows items 4-25 and is hidden
All items have the same lightbox group id

Or,

One collection list, showing all 25 items
Custom CSS limits the on-screen visibility to the first 3, but all 25 are there in the DOM
Lightbox shows all 25

That second approach can be adapted to other scenarios like nested collection lists, however remember that nested lists have a limit of 5 items so you’ll be heading down a more complex path to build something like a real-estate property listing page with individual property photo galleries.

If you head down that complex route, custom code or some tools like Finsweet Nest can get you there with some work.

Hi there! I was just trying to implement @memetican 's first approach on our project. The problem is that dynamic collection pages do not allow to set display limits on collection lists, as far as I know.

settings available on a static page:

settings available on a collection page:

These settings are also not available on static pages when the target collection list is nested inside another collection list (which is actually the only way I know to display the content inside a multi-image field on a static page).

For our project we 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?