Hi there,
I’m currently using CMS Load to load extra Team Members Cards. When a user clicks on an element, it triggers a modal (using Finsweet’s Lightbox) to appear.
The setup is functioning correctly for the first 8 elements. However, when a user clicks on ‘Load More,’ the modal/lightbox stops working. I’m unsure how to resolve this issue. Could you please provide some guidance?
https://preview.webflow.com/preview/twdepcm?utm_medium=preview_link&utm_source=designer&utm_content=twdepcm&preview=920f0095fabc86ee93b6b1b2d5a2314c&pageId=65689a4af7d282f8f6ab3091&workflow=preview
Thanks in advance
hey @francois! This has to do with Webflow interactions.
We have two options:
-
Reset the interactions with fs-cmsload-resetix="true"
, which would require you to remove all initial states from the interactions on the page and simulate this with effects to avoid them appear stuck on this state
-
Use the code below to manually reset the engine, I’ve noticed this introduces a content flash on page change which would need to be addressed.
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsload',
(listInstances) => {
console.log('cmsload Successfully loaded!');
const [listInstance] = listInstances;
listInstance.on('renderitems', (renderedItems) => {
window.Webflow && window.Webflow.destroy();
window.Webflow && window.Webflow.ready();
window.Webflow && window.Webflow.require('ix2').init();
document.dispatchEvent(new Event('readystatechange'));
});
},
]);
</script>
Thank you for your prompt response, Luis! Solution 1 results in a white screen with nothing displaying on the page.
Solution 2 is functional, but as you mentioned, it causes a white flash. Do you have any suggestions on how to address this issue?
Thanks again,
The white screen caused by option 1 is caused by using initial states
on the page’s interactions. You can mimic this initial state with the effect section on the style panel.