Hello there! I’m trying to use the smart lightbox attributes to open a fixed lightbox inside the cards of a slider but it doesn’t seem to work.
My question is, can I use this solution within a CMS collection wrapped in a Swiper.js slider as I’m doing now?
Here is the read-only link:
https://preview.webflow.com/preview/chamber-cardio-2023?utm_medium=preview_link&utm_source=designer&utm_content=chamber-cardio-2023&preview=f9d541aeccc90c4f1738c47f1bdc540d&workflow=preview
Thanks!
hey @marco! can you share your live site password?
Hi @Support-Luis! It is cardio2023
Hey @marco! Can you try initializing Swipr like this?
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'smartlightbox',
(lightboxInstances) => {
const swiper = new Swiper('.swiper', {
/*mousewheel: {invert: true,},*/
// Optional parameters
direction: 'horizontal',
slidesPerView: 3.5,
loop: false,
spaceBetween: 24,
grabCursor: true,
navigation: {
nextEl: '.swiper-nav.next',
prevEl: '.swiper-nav.prev',
},
breakpoints: {
1: {
slidesPerView: 1.1,
spaceBetween: 16,
},
650: {
slidesPerView: 2.1,
spaceBetween: 16,
},
991: {
slidesPerView: 3.5,
spaceBetween: 24,
},
},
});
},
]);
</script>
Hey @Support-Luis, things are getting better but when I switch to the other tab it seems to break again. Do you think the tabs component is causing this problem?
@marco, the tab component can definitely be causing some issues. I’ve tried resetting the attribute on tab change but that does not seem to be working reliably.
@Support-Luis yeah that’s what I thought. Do you think using the CMS filters solution instead of a tab component
would help?
Yes! We can have more options to reinitiate the scripts
@Support-Luis I implemented it on the homepage instead of the tabs component. The filters are working but the lightboxes are broken again. Do we need to change the way we initialise the code?
@marco try using this script for the Lightbox in your <head>
<!-- [Attributes by Finsweet] Smart Lightbox -->
<script
defer
fs-attributes-preventload="true"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-smartlightbox@1/smartlightbox.js"
></script>
And this in your </body>
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsfilter',
(filterInstances) => {
console.log('cmsfilter Successfully loaded!');
window.fsAttributes.smartlightbox.init();
const [filterInstance] = filterInstances;
filterInstance.listInstance.on('renderitems', (renderedItems) => {
window.fsAttributes.smartlightbox.init();
});
window.fsAttributes.push([
'smartlightbox',
(lightboxInstances) => {
console.log('ligthbox initiated');
const swiper = new Swiper('.swiper', {
/*mousewheel: {invert: true,},*/
// Optional parameters
direction: 'horizontal',
slidesPerView: 3.5,
loop: false,
spaceBetween: 24,
grabCursor: true,
navigation: {
nextEl: '.swiper-nav.next',
prevEl: '.swiper-nav.prev',
},
breakpoints: {
1: {
slidesPerView: 1.1,
spaceBetween: 16,
},
650: {
slidesPerView: 2.1,
spaceBetween: 16,
},
991: {
slidesPerView: 3.5,
spaceBetween: 24,
},
},
});
},
]);
},
]);
</script>
Thanks @Support-Luis, unfortunately still no luck 
A weird thing I’m noticing is that when you click the button the lightbox is actually showing in the DOM (I can select the paragraph) but for some reason it is invisible. Also, I’ve set one of the filters to be pre-checked, but it’s like it’s just hiding the cards creating a blank space at the end of the slider.
@Support-Luis I have to correct myself, your last code is working! I modified the animation in Webflow and it’s working great!
At this point, the only issue I have is the one with the blank space at the end of the slider.
Great to hear that you got the code working! 
The blank space at the end of the list could be a slider setting, I see this also has a horizontal scrolling so you might want to look into it.
Hello @Support-Luis
I hope you are doing fine.
I am having the same error as @marco I hope you can help me out on this matter.
Here is the read only link:
I am using a slider to show the speakers with a cms collection. The slider works fine.
The problem I currently have is that the Smart Lightbox is not working properly.
Also, I put the code that you shared before:
<!-- [Attributes by Finsweet] Smart Lightbox -->
<script
defer
fs-attributes-preventload="true"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-smartlightbox@1/smartlightbox.js"
></script>
And the other one:
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsfilter',
(filterInstances) => {
console.log('cmsfilter Successfully loaded!');
window.fsAttributes.smartlightbox.init();
const [filterInstance] = filterInstances;
filterInstance.listInstance.on('renderitems', (renderedItems) => {
window.fsAttributes.smartlightbox.init();
});
window.fsAttributes.push([
'smartlightbox',
(lightboxInstances) => {
console.log('ligthbox initiated');
const swiper = new Swiper('.swiper', {
/*mousewheel: {invert: true,},*/
// Optional parameters
direction: 'horizontal',
slidesPerView: 3.5,
loop: false,
spaceBetween: 24,
grabCursor: true,
navigation: {
nextEl: '.swiper-nav.next',
prevEl: '.swiper-nav.prev',
},
breakpoints: {
1: {
slidesPerView: 1.1,
spaceBetween: 16,
},
650: {
slidesPerView: 2.1,
spaceBetween: 16,
},
991: {
slidesPerView: 3.5,
spaceBetween: 24,
},
},
});
},
]);
},
]);
</script>
after all, I have not been able to get the modal to override all the elements. The modal should show above all elements and not inside the tab of the speaker.
I hope you can help me find a solution for this.
Thank you so much for your time.
Kind regards,
Here is the read only link:
Kind regads,
hey @carlos1pereira7! Can you please share a published link? I’ll take a look
