infinite scroll

Hi robmeerwijk,
I’ve seen that you solved the problem in your website and it’s built in infinite scroll, could you tell us how did you get it?

Thanks, I’ll be pleased to your help!

I changed the following files after installing jetpack:

In functions.php I added the following at the bottom:

add_theme_support( 'infinite-scroll', array(
    'container' => 'dynamic-grid',
    'footer' => 'page',
    'type'           => 'scroll',
    'posts_per_page' => 9
) );

and in scripts.js I added at the bottom

jQuery( document ).ready( function( $ ) {
    // Triggers re-layout on infinite scroll
    $( document.body ).on( 'post-load', function () {
   	$( '#dynamic-grid' ).masonry( 'reload' );
        jQuery('#dynamic-grid').masonry({isAnimated: false});
	});
});

It is not perfect but it helps somewhat. I hope SriniG kan improve it! I have tried several themes but for my purposes, Emphaino is simply the best.

Thanks robmeerwijk!

For those who want to center the infinite loader, you can do with jetpack css adding the following code:

/* Inifnite Scroll - Spinner */
.infinite-loader {
	color: #000;
	position: fixed;
	left: 50%;
	top: 50%;
}

Thanks, I still have another problem. Sometimes jQuery has rearranged the posts before the picture is fully loaded, resulting in overlaying items. Anyone knows a solution for that?

And another one. Jetpack seems to randomly assign pagenumbers resuling in strange behaviour when using the back button after reading a post. Anyone who can help here?

And the last one. Now that I have infinite scroll, I would like to get rid of the previous messages button at the bottom of the page.

All problems solved!

1) avoid overlapping items by means of the method imagesloaded in scripts.js

jQuery( document ).ready( function( $ ) {
     infinite_count = 0;
     // Triggers re-layout on infinite scroll
     $( document.body ).on( 'post-load', function () {
		infinite_count = infinite_count + 1;
		var $container = $('#dynamic-grid');
		var $selector = $('#infinite-view-' + infinite_count);
		var $elements = $selector.find('.hentry');
		$elements.hide();
		jQuery('#dynamic-grid').masonry({isAnimated: false});

		$container.imagesLoaded( function() {
		   $container.masonry('reload');
		});

		$elements.show();
	});
});

2 Random pagination in the url can be avoided by setting wrapper to false in functions.php

add_theme_support( 'infinite-scroll', array(
    'container' 	=> 'dynamic-grid',
    'footer' 		=> true,
    'type'        	=> 'scroll',
    'posts_per_page' 	=> 6,
    'wrapper' 		=> false
) );

And switching the footer and navigation links of in css

/* Hides navigation links and site footer when infinite scroll is active */
.infinite-scroll #nav-below,
.infinite-scroll.neverending #colophon {
	display: none;
}

/*Shows the footer again in case all posts have been loaded
.infinity-end.neverending #colophon {
	display: block;
}*/
/* Don't show the footer again in case all posts have been loaded */
.infinity-end.neverending #colophon {
	display: none;
}

/* Inifnite Scroll - Spinner */
.infinite-loader {
	color: #000;
	position: fixed;
	left: 50%;
	top: 50%;
}

Solved as far as I am concerned

Hi guys. I have same “masonry” problem, but with plugin infinite scroll for wordpress. Jetpack infinite scroll not work on my site, i don`t know why! I try put callback function in plugin settings:

jQuery( document ).ready( function( $ ) {
     infinite_count = 0;
     // Triggers re-layout on infinite scroll
     $( document.body ).on( 'post-load', function () {
		infinite_count = infinite_count + 1;
		var $container = $('#dynamic-grid');
		var $selector = $('#infinite-view-' + infinite_count);
		var $elements = $selector.find('.hentry');
		$elements.hide();
		jQuery('#dynamic-grid').masonry({isAnimated: false});

		$container.imagesLoaded( function() {
		   $container.masonry('reload');
		});

		$elements.show();
	});
});

New content loaded, but not correct with masonry. Please, look screenshot, maybe you understand what happened. Thanks!

Screenshot:

Hi there,

you did a great job, robmeerwijk – your instructions work well for my blog https://www.mobile-tortenwerkstatt.de. I did everything as you instructed.

There’s just one problem: If you scroll down, the new post entries start to show up without the preview image. It’s loaded as “undefined” but the article link works…

If somebody can help me with this issue, I would appreciate it very much.

I don`t understand how can fix overlapping image problem?

Thanks for all the code that you have pasted in this topic. It worked for me. Cheers ??