Lightbox with same setting on every page - how to change

Hello everyone, i’m Posting this again, It seems i can’t wrap my head around this problem i’m facing.
I have a a cms collection with several pages, every page has several sections and inside a container - image wrap- lightbox. I want the thumbnail image taken from the collection (which is an easy click).
But when I add any media into the lightbox settings it will automatically add it to all the other lightbox inside the cms collection. What i want is to have a personalized lightbox gallery for each lightbox and not the media repeating throughout every page, Can anyone please help me with this problem? here’s the link to the template i purchased: Webflow - Manfredi's prova
Screen Shot 2023-10-23 at 12.25.52

i have also watched all the tutorial regarding the cms collection from webflow university, could it be somewhere i couldn’t find? ( Intro to the Webflow CMS - Webflow University Documentation )

1 Like

There’s a setting on each light box called “Link with other lightboxes”. If you uncheck this do you get the result you want?

Hello dave thanks for the reply.
No if i uncheck that voice it won’t do the job. In the screenshot you shared with me you are on the settings of the second picture but if you scroll above to the first picture of the page and you click on it, the setting are different, there’s 2 pictures set and also that voice unchecked. if you go to another page and click on the first picture you will see the same media on every page and also the voice unchecked, so as i make that change to a lightbox on a page it will automatically change it to all the other pages

Hey Manfredi,
I’m not exactly sure what your trying to achieve. Is it anything like in this video:
https://www.loom.com/share/53e4cff93758479fbce47efc571bf65c
I got this by unlinking each lightbox and just adding a single image from the CMS (as you can see).
Let me know what you are trying to get.
Cheers, Dave

Hey Manfredi,
Sorry for the simplicity of my prevous reply - I should have read your post more carefully
You want each project page to have lightboxes that are independent of the corresponding lightboxes on the other project pages - correct?
Normally this isnt how things work - if you change anything on your CMS page it will change all versions of that page.
The way to achieve this effect however is to create multiple lightboxes within your CMS page and then restrict their display using conditional visibilty - see image:


Are we on the right track?

hey dave, thanks for following up.
let me explain my self better: (have a look at the the screenshot above in my initial post)
what you did is clicking “get media from cms projects” but this will only display 1 picture. In the lightbox settings If you uncheck the “get media from cms projects " and add media one by one they will repeat in every lightbox on every page. here’s a video of what i mean : Loom | Free Screen & Video Recording Software | Loom . as you can see at the end of my video in the settings, the voice " get media from cms project” is unchecked, instead there are 2 media i added one by one. If i do so, as you can see from the first part of the video, the same media will be visible in each lightbox on every page.
what i’m trying to achieve is to have specific and different media for each lightbox on different pages.
what is happening now is, if i add media on one lightbox they will show up on the light box of every page.

For what i can see and understand from this screenshot here, you are adding more lightboxes and hiding them with a condition visibility, but if every picture is taken from the project then on click it will anyway show the same picture and only one and not a gallery, right?
what i’m trying to achieve is to have a specific gallery of pictures for that specific lightbox on that page.

Hi Manfredicops,

This goes back to your earlier questions on the CMS.
Just reminding you that everything on your CMS template page that is not bound to the CMS ( these show as purple ) will be on all of your pages.

When you want something to show item-specific data, it must be bound to an item-specific field.

In the case of photo galleries, a common structure is-

  • Add an image gallery field to your CMS collection ( Projects? )
  • On your collection page template, drop a collection list, and bind it to that gallery field
  • Inside that list, drop your lightbox element, and bind its image and media accordingly

Typically this would be presented as a gallery on the page, and clicking on any of the thumbnails would show the gallery lightbox with all images. In your case, it sounds like you’re wanting a single image to display, which when clicked shows a lightbox containing a gallery of images.

There are a few ways to do this as well.
The simplest is to set it up as I described above, and then to also have a single image field which stores that gallery’s main image.

You’d have your main image shown as you do now, linked to a lightbox, with a group of e.g. “group1”.
Then you’d have the collection list containing the image gallery fields, also with a lightbox, also with “group 1”.
That collection list does not need to display, you can mark the whole DIV as display none, or just avoid showing any thumbnails. The lightbox code an JSON will still be in the page, and clicking your main image will show that image, plus all of the others.

1 Like

Hey Manfredicops,

I like @memetican 's solution. It’s more elegant than mine and preserves the integrity of your CMS. :clap:

I put together a read only for you showing exactly how it’s built

Read Only Link

Loom Video of it Working

The most important elements on the page are:

  1. A Lightbox Link which gets its image from “Lightbox Thumbnail” single image field in the CMS
  2. A Collection List bound to the “Lightbox Gallery” multi image field in the CMS (with the display:none CSS property)
  3. A second Lightbox Link inside the collection list (also not visibile as its parent has display:none)

Important: The lightboxes are linked by ticking “link with other lightboxes” and using a group name, here “Lightbox Group”

Also note that I didnt optimise the images (they are large and slow to load) so if you see the wrong lightbox on first try then that’s why.

Hope that helps you with your project cheers,

Dave

2 Likes