Support » Plugin: Infinite-Scroll » Infinite Scroll/Masonry overlapping issue

  • Resolved Jase

    (@jasewarner)


    Hi,

    I’m experiencing overlapping when using the Masonry feature in the Infinite Scroll plugin.

    I’ve entered the following code into the Callback field of the plugin settings page:

    var $newElems = $( newElements ).css({ opacity: 0 });
        $newElems.imagesLoaded(function(){
        $newElems.animate({ opacity: 1 });
        $('#masonry-container').masonry( 'appended', $newElems, true );
      });

    And this is the code I use in my scripts.js file to initiate Masonry when the document has loaded:

    function masonry(){
            var $container = $('#masonry-container');
            $container.imagesLoaded( function() {
                $container.masonry({
                    itemSelector: '.box'
                });
            });
        }

    Lastly, here is a link to a page that shows where it is breaking: http://79.170.44.118/pr-2015.com/galerie/2010/

    Thanks in advance for your help!

    https://wordpress.org/plugins/infinite-scroll/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Jase

    (@jasewarner)

    *** UPDATE ***

    I have managed to fix the overlapping issue by changing the callback from this:

    var $newElems = $( newElements ).css({ opacity: 0 });
        $newElems.imagesLoaded(function(){
        $newElems.animate({ opacity: 1 });
        $('#masonry-container').masonry( 'appended', $newElems, true );
      });

    to this:

    (function($) {
        var $newElems = $( newElements ).css({ opacity: 0 });
        $newElems.imagesLoaded(function(){
            $newElems.animate({ opacity: 1 });
            $('#masonry-container').masonry( 'appended', $newElems, true );
        });
    })(jQuery);

    However, whilst the overlapping issue is fixed there is now a problem with spacing each time infinite scroll is called upon. Here’s a link as an example: http://79.170.44.118/pr-2015.com/galerie/2010/

    Any ideas?

    Jase

    (@jasewarner)

    *** RESOLVED ***

    If anybody ever happens to run into this problem, here’s the solution…
    I entered the following code in the Callback settings field of the plugin:

    (function($) {
    var $container = $('#masonry-container'); // this is the content selector
    $container.imagesLoaded( function() {
        $container.masonry({
            itemSelector: '.box' // this is the item selector
        });
    });
    })(jQuery);

    Thank you very much, you helped me.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Infinite Scroll/Masonry overlapping issue’ is closed to new replies.