439 posts
  • Bought between 50 and 99 items
  • Europe
  • Exclusive Author
  • Has been a member for 2-3 years
  • Sold between 5 000 and 10 000 dollars
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?

2440 posts
  • Has been a member for 5-6 years
  • Exclusive Author
  • Europe
  • Bought between 10 and 49 items
  • Referred between 100 and 199 users
  • Sold between 100 and 1 000 dollars
  • Envato Studio (Microlancer) Beta Tester
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
  • Bought between 10 and 49 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 3-4 years
  • Serbia
  • Sold between 10 000 and 50 000 dollars
NikolaSusa says

Try using waypoints.js for the infinite scroll.

3192 posts
  • Sold between 5 000 and 10 000 dollars
  • United States
  • Bought between 10 and 49 items
  • Has been a member for 4-5 years
  • Exclusive Author
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.

2440 posts
  • Has been a member for 5-6 years
  • Exclusive Author
  • Europe
  • Bought between 10 and 49 items
  • Referred between 100 and 199 users
  • Sold between 100 and 1 000 dollars
  • Envato Studio (Microlancer) Beta Tester
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 :)

439 posts
  • Bought between 50 and 99 items
  • Europe
  • Exclusive Author
  • Has been a member for 2-3 years
  • Sold between 5 000 and 10 000 dollars
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…

439 posts
  • Bought between 50 and 99 items
  • Europe
  • Exclusive Author
  • Has been a member for 2-3 years
  • Sold between 5 000 and 10 000 dollars
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