Making Infinite Scroll Work with Fancybox Galleries

Infinite scroll and Fancybox often work perfectly on the first page load and then fail as soon as new images are appended. The reason is simple: Fancybox was initialized on the original DOM nodes only, while the newly loaded items never received the same binding.

Two reliable fixes

1. Re-initialize Fancybox after every infinite-scroll append event.
2. Use delegated event binding if the gallery plugin supports it.

$(document).on('append.infiniteScroll', function () {
  $('.gallery a').fancybox();
});

What to watch for

• do not initialize the same nodes repeatedly without cleanup
• make sure appended markup matches the original selector
• keep gallery grouping attributes consistent so the new images join the same lightbox set

This is one of those frontend issues where the CMS is not the real problem. Evolution is just delivering the markup. The fix is in how the JavaScript layer treats content that arrives after the initial render.