Reload scripts after fetching new content (infinite scroll wordpress + fancybox)

Question

I'm incredibly new to JQuery and Javascript in general. I'm using the Infinite Scroll wordpress plugin and I'm highly customizing a theme. In the theme it eventually calls to a Fancybox Javascript - I use it as an image gallery on a 4x4 grid of post/images on the home page.

When you scroll down, it loads 16 new posts, however it does NOT include the Fancybox effect (can't even click on the images)

The plugin has a section "Javascript to be called after next posts are fetched" :Any functions that are applied to the post contents on page load will need to be executed when the new content comes in.

The Fancybox script is loaded in the footer, under "page_templates.php". I'm not sure exactly how to get it to work? :/

Here's my site, any help would be appreciated! My Site

Answer 1

I have used neither fancybox nor infinite scroll, but the logic here is that fancybox will not be automatically invoked on the content that is fetched by infinite scroll. We have to do this explicitly.

Can you configure the infinite scroll in some way? Because what we need to do is use the callback function in infinite scroll to invoke fancybox on the newly fetched elements:

function applyFancyBoxToImages(elements){
    $(elements).each(function(){
        $(this).find('img').fancybox();
    });
}

$(elem).infinitescroll(options,applyFancyBoxToImages(arrayOfNewElems));

Or something to that effect.