Infinite Scroll/Masonry overlapping issue

  • Resolved jasewarner

    (@jasewarner)


    10 years, 2 months ago

    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: https://79.170.44.118/pr-2015.com/galerie/2010/

    Thanks in advance for your help!

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter jasewarner

    (@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: https://79.170.44.118/pr-2015.com/galerie/2010/

    Any ideas?

    Thread Starter jasewarner

    (@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);
    Anatoliy

    (@anatoliyav)

    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.