Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Infinite scroll and the callback

Apologies if this conflicts with a previous post of mine, but I am pretty stuck with the whole callback function of infinite scroll that hopefully someone can help me out.

I'm using the Portfolio Slideshow Pro (http://madebyraygun.com/wordpress/plugins/portfolio-slideshow-pro/) for Wordpress combined with Infinite Scroll.

This is what my infinite scroll JS looks like:

<script>
  $(function(){

    var $container = $('.rest-of-content');

    $container.infinitescroll({
      navSelector  : '.wp-paginate',    // selector for the paged navigation 
      nextSelector : '.wp-paginate li a',  // selector for the NEXT link (to page 2)
      itemSelector : '.single-fg-post',     // selector for all items you'll retrieve
      bufferPX: 20,
      loading: {
          msgText: 'Fetching more gold...',
          finishedMsg: 'We\'ve ran out of gold!',
          img: '<?php bloginfo('template_directory'); ?>/images/ajax-loader-black.gif'
        }

    });

  });
</script>

The slideshow plugin is a whole $(window).load so I took everything inside that, and turned it into a function.

$(window).load(function() { portfolioSlideshow() });

But now I need to callback that function each time the new set of posts load as although the infinitescroll is working, the JS on the slideshow aren't.

Can someone please help me add the function I created to the callback of infinitescroll so it reloads the function each time new data is loaded in?

Thanks so much in advance.

-R

like image 586
John the Painter Avatar asked Jan 06 '12 19:01

John the Painter


1 Answers

$container.infinitescroll({
    navSelector  : '.wp-paginate',    // selector for the paged navigation 
    nextSelector : '.wp-paginate li a',  // selector for the NEXT link (to page 2)
    itemSelector : '.single-fg-post',     // selector for all items you'll retrieve
    bufferPX: 20,
    loading: {
        msgText: 'Fetching more gold...',
        finishedMsg: 'We\'ve ran out of gold!',
        img: '<?php bloginfo('template_directory'); ?>/images/ajax-loader-black.gif'
    }
},
function(arrayOfNewElems)
{
    portfolioSlideshow();
});

This will call portfolioSlideshow() every time the infinitescroll plugin loads new data.

like image 145
Jeff Avatar answered Sep 20 '22 00:09

Jeff