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?

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 :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.

<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.