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
  • Sells items exclusively on Envato Market
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
  • Has been part of the Envato Community for over 5 years
  • Has sold $100+ on Envato Market
  • Has referred 100+ members
  • Has been a beta tester for an Envato feature
+2 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 4 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.

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

2468 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $100+ on Envato Market
  • Has referred 100+ members
  • Has been a beta tester for an Envato feature
+2 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
  • Sells items exclusively on Envato Market
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
  • Sells items exclusively on Envato Market
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]));
}

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by