CMS Load + Lightbox

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?

Thanks in advance :slight_smile:

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.

  window.fsAttributes = window.fsAttributes || [];
    (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'));

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.