jQuery Infinite Scroll & View.js

Hi, guys. Have a trouble to make these scripts works together http://www.infinite-scroll.com/ and http://finegoodsmarket.com/view/ I mean when new content with images is loading via ajax with a help of Infinite Scroll, View.js doesn’t work for these images. Are there an authors who had been working with such scripts?

ViewJS triggers on page load or DOM ready – whatever the case, Infinite Scroll would need a callback after the new content has been loaded. You would run ViewJS in that callback, for the newly added images.

Unfortunately, I don’t see any such callback implemented in Infinite Scroll....

Try using waypoints.js for the infinite scroll.

$('#content').infinitescroll({

  navSelector  : "div.navigation",             
  nextSelector : "div.navigation a:first",     
  itemSelector : "#content div.post",           
  debug        : true,                         
  loadingImg   : "/img/loading.gif",           
  loadingText  : "Loading new posts...",       
  animate      : true,      
  extraScrollPx: 50,      
   donetext     : "I think we've hit the end, Jim" , 
  bufferPx     : 40, 
  errorCallback: function(){}, 
  localMode    : true
    },function(arrayOfNewElems){

    this is where you put the view.js stuff

});

for the callback that is.

^ LOL Chris, I need to take a break, I could have sworn I didn’t see any callback

Pixelous – use what OrganicBeeMedia suggested, you would trigger ViewJS for the newly added elements in there

Thanks for your replies, guys. I have not tried Chris’ code coz before his post I tried this:

var $container = jQuery('#hentry-wrapper');

            $container.imagesLoaded( function(){
                $container.isotope({
                    masonry: {
                        columnWidth: 454,
                        gutterWidth: 30
                    },
                    itemSelector : '.hentry'
                });
            });

            $container.infinitescroll({
                navSelector: '#nav-pagination',
                nextSelector: '#nav-pagination .next',
                itemSelector: '.hentry',
                loading: {
                    finishedMsg: 'No more pages to load.',
                    img: 'http://i.imgur.com/qkKy8.gif'
                }
            },
            // call Isotope as a callback
            function (newElements) {
                var $newElems = jQuery( newElements );
                $container.imagesLoaded(function(){
                    $container.isotope( 'appended', jQuery( newElements ) );
                    new View( jQuery('a.view[href]') );
                    jQuery('.gallery').plusSlider({
                        sliderEasing: 'easeInOutExpo',
                        pauseOnHover : true,
                        autoPlay: false,
                        fullWidth: true,
                        sliderType: 'slider',
                        displayTime: 100000
                    });
                });
            });

U see new View( jQuery(‘a.view[href]’) ); ? Now view.js works with Infinite Scroll but this time it’s not working with images rel attributes. It means that clicking on image from one post view.js grab all the images at a document even from another posts but it shouldn’t. If u see the doc here http://finegoodsmarket.com/view/#advanced-setup u will know what I mean. ?auto doesn’t work with new View( jQuery(‘a.view[href]’) ); So, even don’t know what to do now…

A code from view.js have figured a problem. Instead of:

new View( jQuery('a.view[href]') );

need:

var $a = jQuery('a.view[href]');
var sets = {};

$a.each(function () {
  var r = this.rel;
  if( r ){
    if (!sets[r]) {
      sets[r] = [];
    }
    sets[r].push(this);
  }else{
    new View(jQuery(this));
  }
});
for (var i in sets) {
  new View(jQuery(sets[i]));
}