Lightbox not working on subsequent paginated pages after infinite load

Attributes
1

I have a portfolio page on this site that uses infinite load and a lightbox, which works normally on the first paginated page. After I scroll down and the infinite load loads the next page, and the next, etc. the lightbox no longer works. Been at this for a few days, not sure what could be the culprit here.

In the staging site, if you click on a thumbnail, you can see all 21 lightbox items in the same gallery. After loading the next page, the lightbox gallery items doesn’t update with the additional items.

Any help is greatly appreciated, thank you!

Live site
Read-only

2

Hi @Drcontempo!

I’ve made this script to listen for when List Load finishes rendering items, then it re-initializes Webflow’s lightbox component to ensure it works properly with the newly loaded content.

Add this script before your </body> tag.

<script>
  window.FinsweetAttributes ||= [];
  window.FinsweetAttributes.push([
    'list',
    (listInstances) => {
      listInstances.forEach((listInstance) => {
        listInstance.addHook('render', () => {
          const lightbox = window.Webflow?.require?.('lightbox');
          if (lightbox && typeof lightbox.ready === 'function') {
            lightbox.ready();
          }
        });
      });
    },
  ]);
</script>

Try this and please let me know if it works for you!

3

It did indeed!! Thank you!!!

2 Likes