[Plugin: Infinite-Scroll] Infinite scroll and Masonry issue

  • Resolved squrler

    (@squrler)


    12 years, 9 months 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 https://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?

    https://www.ads-software.com/extend/plugins/infinite-scroll/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter squrler

    (@squrler)

    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???

    Thread Starter squrler

    (@squrler)

    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 );
    Thread Starter squrler

    (@squrler)

    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… ??

    danny

    (@danielmichel)

    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>

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘[Plugin: Infinite-Scroll] Infinite scroll and Masonry issue’ is closed to new replies.

Tags