438 posts
  • 3 Years of Membership
  • Author Level 4
  • Collector Level 3
  • Exclusive Author
Pixelous
says

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?

2468 posts
  • 6 Years of Membership
  • Author Level 2
  • Affiliate Level 4
  • Beta Tester
+3 more
digitalimpact
says

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....

324 posts
  • 4 Years of Membership
  • Author Level 5
  • Beta Tester
  • Collector Level 2
+2 more
NikolaSusa
says

Try using waypoints.js for the infinite scroll.

3439 posts
  • Author Level 4
  • Collector Level 2
  • Community Superstar
  • United States
+2 more
organicbee
says
$('#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.

2468 posts
  • 6 Years of Membership
  • Author Level 2
  • Affiliate Level 4
  • Beta Tester
+3 more
digitalimpact
says

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

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

438 posts
  • 3 Years of Membership
  • Author Level 4
  • Collector Level 3
  • Exclusive Author
Pixelous
says

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…

438 posts
  • 3 Years of Membership
  • Author Level 4
  • Collector Level 3
  • Exclusive Author
Pixelous
says

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]));
}
by
by
by
by
by
by