Load More breaks native Lightbox

Attributes
1

My Lightbox breaks when using the Load More feature. The Lightbox doesn’t open on newly loaded items.

2

Hey @galkinbogdan! If you are using the native lightbox element, you’ll need to restart Webflow’s interaction engie each time new items are renderd on the page.

We can do this with the API. As shown below.

<script>
  window.FinsweetAttributes = window.FinsweetAttributes || [];
  window.FinsweetAttributes.push([
    'list',
    (listInstances) => {
      console.log('List Successfully loaded!');

      const [listInstance] = listInstances;

      listInstance.addHook('render', (items) => {
        console.log(items);
        window.Webflow && window.Webflow.destroy();
        window.Webflow && window.Webflow.ready();
        window.Webflow && window.Webflow.require('ix2').init();
        document.dispatchEvent(new Event('readystatechange'));
      });
    },
  ]);
</script>

Simply add this to the </body> section of the page’s custom code and publish to test!

Let me know how it goes!

1 Like
3

Thank you so much for your reply! Yes, it works now, the Lightbox is opening but there is another issue: while it’s loading, a youtube video doesn’t open. There is just infinity loading.

Could you test it please here:

read-only link:

4

Hey @Support-Luis, just checking in — do you maybe have any idea what could be causing this? :slightly_smiling_face:

5

Hey @galkinbogdan! Do you have any code managing the open/close of the videos?

This will need to be run again, using the same snippet I shared before it should look like this

<script>
  window.FinsweetAttributes = window.FinsweetAttributes || [];
  window.FinsweetAttributes.push([
    'list',
    (listInstances) => {
      console.log('List Successfully loaded!');

      const [listInstance] = listInstances;
      
      // Run code for YouTube

      listInstance.addHook('render', (items) => {
        console.log(items);
        window.Webflow && window.Webflow.destroy();
        window.Webflow && window.Webflow.ready();
        window.Webflow && window.Webflow.require('ix2').init();
        document.dispatchEvent(new Event('readystatechange'));

        // Run code for YouTube again
      });
    },
  ]);
</script>