438 posts
  • Has been part of the Envato Community for over 2 years
  • Has sold $5,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Located in Europe
+1 more
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?

2445 posts
  • Has referred 100+ members
  • Has sold $100+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+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
  • Has been part of the Envato Community for over 3 years
  • Has sold $10,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+2 more
NikolaSusa says

Try using waypoints.js for the infinite scroll.

3231 posts
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in United States
  • Has been part of the Envato Community for over 4 years
+1 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.

2445 posts
  • Has referred 100+ members
  • Has sold $100+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+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
  • Has been part of the Envato Community for over 2 years
  • Has sold $5,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Located in Europe
+1 more
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
  • Has been part of the Envato Community for over 2 years
  • Has sold $5,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Located in Europe
+1 more
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