infinite scroll
-
Hi SriniG,
I like your theme very much for my blog. I have a request anyway. Could you add JetPack infinite scroll support?
That would be really great!
Thanks,
Rob Meerwijk
http://www.meerwijk.dk
-
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!
Hi there,
you did a great job, robmeerwijk – your instructions work well for my blog http://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 🙂
- The topic ‘infinite scroll’ is closed to new replies.