WordPress.org

Support

Support » Plugins and Hacks » Jetpack by WordPress.com » [Resolved] Infinite Scroll Support and JetPack

[Resolved] Infinite Scroll Support and JetPack

  • danielmichel

    @danielmichel

    “At this time, your theme, varmag, doesn’t support Infinite Scroll. Unlike other Jetpack modules, Infinite Scroll needs information from your theme to function properly”

    Can you tell us who have made our own custom themes how we can enable support for this feature?

    Thanks

    http://wordpress.org/extend/plugins/jetpack/

Viewing 15 replies - 1 through 15 (of 20 total)
  • Plugin Contributor Erick Hitter

    @ethitter

    Hi,

    You can find information about adding theme support at http://jetpack.me/support/infinite-scroll/.

    danielmichel

    @danielmichel

    Thnk you. I’ve added it to my ‘dev site‘ and I’m a little confused with how I can modify it to work the way it works on my live site.
    Any help would be appreciated

    danielmichel

    @danielmichel

    Dev site with new infinite scroll

    add_theme_support( 'infinite-scroll', array(
     	'type'           => 'scroll',
    	'footer_widgets' => false,
    	'container'      => 'content',
    	'wrapper'        => true,
    	'render'         => false,
    	'posts_per_page' => false
    ) );

    Live site

    <?php if ( is_home() || is_category() ) { ?>
    	$container.infinitescroll({
    		navSelector  : '#nav-below',
    		nextSelector : '#nav-below .nav-previous a',
    		itemSelector : '.entries',
    		bufferPx: 10000,
    		loading: {
    			img: "<?php echo get_template_directory_uri(); ?>/images/ajax-loader.gif",
    			msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
    			finishedMsg: "<?php _e( 'All content loaded.', 'custom' ); ?>"
    		},
    		debug: false,
    		animate: false
    	},
    	function( newElements ) {
    		var $newElems = $( newElements ).css({ opacity: 0 });
    		$newElems.imagesLoaded(function(){
    			$newElems.animate({ opacity: 1 });
    			$container.masonry( 'appended', $newElems, true );
    		});
    	}
    	);
    	<?php } ?>
    danielmichel

    @danielmichel

    If anybody ends up getting this to work with Masonry, please let me know

    Plugin Contributor Erick Hitter

    @ethitter

    From a quick check of your site, it looks like you should change the container attribute to be article-grid as that’s the element your current Infinite Scroll code adds posts to. Beyond that, it’s hard to tell what else you might need to do without digging into the theme itself. For that level of assistance, you may need to hire a consultant if you don’t have in-house staff available.

    As for working with jQuery Masonry, our Infinite Scroll code triggers a post-load JavaScript event on document.body after each set of posts is appended. We use that event to trigger Masonry with themes on WordPress.com. One such example is Pinboard, which you can see a demo of at http://pinboarddemo.wordpress.com/.

    passegua

    @passegua

    Hi everybody, I’ve read http://jetpack.me/support/infinite-scroll/
    but I didn’t understand “where” should I add those code line?
    add_theme_support( ‘infinite-scroll’, array(
    ‘container’ => ‘content’,
    ‘footer’ => ‘page’,
    ) );
    to which file?
    1) functions.php ?
    2) index.php ?
    ???

    Many thanks.

    My wordpress blog is here:

    http://lnx.sinapsi.org/wordpress

    Plugin Author Jeremy Herve

    @jeherve

    You should indeed add it to your functions.php file.

    passegua

    @passegua

    Well, I did it, but nothing change in my theme.
    Any other suggestion?
    Thanks.

    [ link removed, correct link provide above already ]

    Moderator Jan Dembowski

    @jdembowski

    Brute Squad and Volunteer Moderator

    *Ow. Makes frown face from auto play of noise from that site and quickly closes said site*

    Otto recently did a write up on how to add Jetpack’s infinite scroll to your theme.

    Try disabling all of your plugins (including whatever made that noise that cause me to leave your site immediately…) and give this a read.

    Jetpack and the Infinite Scroll

    As usual please make sure a) you’ve good file backups before poking at your theme files and b) consider doing any modifications to your theme via a child theme.

    ngoodfellow

    @ngoodfellow

    [* Removed duplicate of http://wordpress.org/support/topic/scrolling-not-loading-gallery-view-javascript-jquery?replies=1 Please do not post duplicate requests.]

    I don’t get the «post-load» on categories page. Is there a way to catch this on categories pages as well?

    Plugin Author Jeremy Herve

    @jeherve

    @philb74 Could you start a new thread, and post links to some of your category archive pages so we can investigate further?

    Using the WordPress example site that Erick linked to, this is how I ended up getting Masonry and Infinite Scroll to work together.

    // Code inside here fires when the DOM is ready
    jQuery(window).load(function(){
    	jQuery('#content').masonry({
    		itemSelector : '.post',
    		columnWidth : 250
    	});
    });
    
    // Handle new items appended by infinite scroll
    jQuery(document).on('post-load', function() {
    	setInterval( function() {
    		jQuery( '#content' ).masonry( 'reload' );
    	}, 300 );
    });

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘[Resolved] Infinite Scroll Support and JetPack’ is closed to new replies.
Skip to toolbar