WordPress.org

Forums

Infinite-Scroll
[resolved] Infinite scroll and Masonry issue (5 posts)

  1. squrler
    Member
    Posted 3 years ago #

    Hey there,

    I'm trying to get infinite scroll to work with masonry, and I'm running into some problems. I checked the forum for issues related to masonry but I couldn't get those answers to work. Please help?

    So infinite scroll works, new posts just pop under the existing posts. So the callback to masonry doesn't work.

    This is the code I'm using to get Masonry going:

    var $container = jQuery('.tt');
    
        $container.imagesLoaded(function(){
          $container.masonry({
            itemSelector: '.tt_post',
            columnWidth: 240,
            gutterWidth: 10
          });
        });

    And this is what I've inserted into the callback field in the admin:

    function(newElements) {
            // hide new items while they are loading
            var $newElems = $(newElements).css({ opacity: 0 });
            // ensure that images load before adding to masonry layout
            $newElems.imagesLoaded(function(){
              // show elems now they're ready
              $newElems.animate({ opacity: 1 });
              $container.masonry( 'appended', $newElems, true );
            });

    This can be seen at http://youworkit.co.uk/home/.

    The javascript error this is being thrown is 'function statement requires a name' at function(newElements). What am I doing wrong?

    http://wordpress.org/extend/plugins/infinite-scroll/

  2. squrler
    Member
    Posted 3 years ago #

    Now I'm trying

    // hide new items while they are loading
            var $newElems = $(newElements).css({ opacity: 0 });
            // ensure that images load before adding to masonry layout
            $newElems.imagesLoaded(function(){
              // show elems now they're ready
              $newElems.animate({ opacity: 1 });
              $container.masonry( 'appended', $newElems, true );

    I'm getting the error: 'imagesLoaded is not a function'. But imagesLoaded works on the page just fine... It just won't work in the callback.
    This is absolutely maddening. What am I doing wrong???

  3. squrler
    Member
    Posted 3 years ago #

    Ok, I managed to get it to work. This is what I've inserted into the callback field:

    var $newElems = $( newElements ).css({ opacity: 1 });
    $container.masonry( 'appended', $newElems, true );
  4. squrler
    Member
    Posted 3 years ago #

    The 'imagesLoaded is not a function error' stemmed from the fact that another copy of jQuery was loading other than in the header.

    So I removed that and finally got the WHOLE thing to work with this code:

    // hide new items while they are loading
    var $newElems = jQuery(newElements).css({ opacity: 0 });
    // ensure that images load before adding to masonry layout
    $newElems.imagesLoaded(function(){
    // show elems now they're ready
    $newElems.animate({ opacity: 1 });
    $container.masonry( 'appended', $newElems, true );
    });

    Succes!! Finally... :)

  5. danielmichel
    Member
    Posted 2 years ago #

    I have the same issue.
    I tried to use your code, but it isnt working. think you can help me out?
    weird thing is that it works when i combine all my css
    Here's my code

    <script>
    		jQuery(function($){
    		<?php if ( is_single() ) : ?>
    		var $container = $('.gallery');
    		<?php else: ?>
    		var $container = $('#article-grid');
    		<?php endif; ?>
    		$container.imagesLoaded(function(){
    		$container.masonry({
    		<?php if ( is_single() ) : ?>
    		itemSelector: '.gallery-item',
    		<?php else: ?>
    		itemSelector: '.entries',
    		<?php endif; ?>
    		<?php if ( is_single() ) : ?>
    		columnWidth: 3,
    		<?php else: ?>
    		columnWidth: 20,
    		gutterWidth: 20
    		<?php endif; ?>
    		});
    		});
    		<?php if ( is_single() ) : ?>
    		});
    		<?php else: ?>
    		$container.infinitescroll({
    		navSelector  : '#nav-below',
    		nextSelector : '#nav-below .nav-previous a',
    		itemSelector : '.entries',
    		loadingText: 'Loading the next page',
    		loadingMsgRevealSpeed: 0,
    		bufferPx: 80,
    		extraScrollPx: 0,
    		donetext: 'No more pages to load',
    		debug: false,
    		animate: false,
    		loadingImg: '/wp-content/uploads/2012/10/ajax-loader.gif'
    		},
    		function( newElements ) {
    		var $newElems = $( newElements ).css({ opacity: 0 });
    		$newElems.imagesLoaded(function(){
    		$newElems.animate({ opacity: 1 });
    		$container.masonry( 'appended', $newElems, true );
    		});
    		}
    		);
    		});
    		<?php endif; ?>
    	</script>

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Infinite-Scroll
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic