Adding a Lightbox to a CMS Slider Component

you'll need to use the Finsweet CMS Slider attributes to make this component work with CMS.

I am using the Finsweet attributes. I’m not sure how to add the lightbox in there.

in your duplicate collection list - where you have the collection list attributes - you can put anything you want inside of the collection item. You'll likely want to do a nested collection. Depending on what is going on, on the page, you may also need to use the Finsweet CMS Nest attributes as well.

Let me know if that is enough info to be dangerous with it otherwise I can record a quick loom video here shortly.

Ha, I will thank you very much for the quick reply, Matt!

ok, the loom would definitely be helpful whenever you have time. Thank you.

I think that this is more of a data structures issue so far - for each slide in a listing, you want there to be multiple unique photos basically right? Because each slide is a listing? Do I have that right?

or maybe I have that wrong actually, it kind of looks like I'm already on a listing, but you have multiple images.

Yeah, sorry it’s a little confusing. My client asked to have the page look similar to this one: https://www.liuzzarealtygroup.com/realty-listing/119-cardinal-lane

okay got it, totally doable, I have that piece working

I thought it was a bit more complex than that but its good that its not because that was a bit of a maze that I had going on.

oh good. I’m still learning as you can tell, so I appreciate your assistance

oh I just found a how to edit light box components in FAQs. Will check that out too.

I'm not in a good spot to do a video right now but I think we can make it work.

My read only: https://preview.webflow.com/preview/cw-cms-slider-lightbox?utm_medium=preview_link&utm[…]8483c15fdb&itemId=656a5b9cdcb629cb29a3922f&workflow=preview

Published URL: https://cw-cms-slider-lightbox.webflow.io/project/dolores

Basically follow the Finsweet attributes CMS Slider - you'll see I have both of those attributes there.

Transfer the classes from the slider component as well to the collection.

And the important step is in the lightbox. Make sure that you select the image element, hook up both the lightbox and image element to the multi-image field and then make sure that the checkbox for "Link with other lightboxes" is checked and that you have a name in there - it can be anything - but it has to be the same. In this case since its controlled by the CMS, it will be the same so thats good and easy.

Let me know if this works out for you or if you still want that video, I can try to record that later.

Awesome, thank you Matt. Got distracted, but will read.

Ok, it worked. I didn’t realize I had to manually add the light box element. ha. Thank you for the help!

Now I’m on to Header 78 to try to smooth the animation…. I added photos to top list and duplicated them, then repeated the same with the bottom. But I’m still getting a choppy animation. I’m not sure what I’m doing wrong. https://preview.webflow.com/preview/register-real-estate?utm_medium=preview_link&utm_s[…]e&preview=fd21896b0d1c4b1a10680a9783d6260d&workflow=preview

yeah interesting, I do see a slight jolt there at the end. Is that what you mean by choppy or do you mean something else?

yes, jolt is a better description. I’m getting it on Header 78 at the top then 77 for the agents. I followed Adam’s video to copy & paste the original set. If I do that, can I not add new photos to the duplicated set for variety? I could’ve have done something incorrectly.

https://preview.webflow.com/preview/register-real-estate?utm_medium=preview_link&utm_s[…]e&preview=82c57f5afc6b60ed6f13303fbff72cef&workflow=preview

any ideas on how to remove the jolt? also, does it have to bee the same photos in each set? I’d like to show more variety of the agents too. Thanks.