Support » Plugin: Ajax Pagination and Infinite Scroll » Plugin Breaks Masonry Style

  • Resolved eddyb1988

    (@eddyb1988)


    Hi, the plugin is exactly what i am after, but it breaks my masonry style grid completely.

    My site: here

    Posts selector/container: .posts
    Post Selector: .post
    Nav Selector: .archive-nav
    Next selector: .post-nav-older (i put this as when i put .post-nav-newer the load button dissappears)

    • This topic was modified 3 years ago by eddyb1988.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author craigramsay

    (@malinkymedia)

    Hi, thanks for using the plugin. There are notes on the plugin page that explains how to use with Masonry. This will point you in the right direction. Masonry lays out the items once loaded and therefore you need to relayout the new items once they are loaded with ajax.

    Thanks

    Isotope / Masonry
    If your using an isotope / masonry layout then you’ll need to add a callback in the settings to layout the new posts when they are added. This should be in the following format.

    $(‘.grid’).isotope(‘reloadItems’).isotope();

    Change the reference to the class name .grid to your own container element.

    eddyb1988

    (@eddyb1988)

    Hey Malinky,

    Cheers for the fast response!

    I added that piece of code and replaced .grid with .posts which is the container that surrounds my posts, however, when i press “load more” it still stacks my posts instead of using the masonry layout, thus making it look weird.

    Is there anything else I’m missing? I really want to use this plugin as its perfect for my site .

    Plugin Author craigramsay

    (@malinkymedia)

    Hi,

    You’re using masonry not isotope so the code will be different. Try one of these.

    $('.posts').masonry();
    $('.posts').masonry('reloadItems');

    Thanks

    eddyb1988

    (@eddyb1988)

    Hey 🙂

    I tried that and still not working, any other ideas?

    If you click load more it just stacks the posts ontop of eachother, really strange?

    Plugin Author craigramsay

    (@malinkymedia)

    Unfortunately there aren’t other ideas as that is what the issue will be. Logically, as you can see the new posts are being loaded so the plugin is doing it’s job, which is to load posts with ajax. The issue lies in that masonry doesn’t know there are new items on the page to layout.

    If you want to email me a login to the site I’ll take a look when I can with some other callbacks. If not take a look through here.

    http://masonry.desandro.com/methods.html

    hello@wordpress-ajax-pagination.com.

    igarciaoliver

    (@igarciaoliver)

    hi If I may suggest:
    it would be better to use a more complex callback to handle this:

    $('#the-grid').imagesLoaded()
    	.always( function( instance ) {
    	// init Masonry on .always!
    	$('#the-grid').isotope('reloadItems').isotope();
    	console.log('ajax-isotope ok');
    })

    Masonry and isotope won’t be able to property calculate needed positions until everything is loaded

    Excellent plugin 🙂

    Plugin Author craigramsay

    (@malinkymedia)

    Yes thanks for pointing this out. If your grid items don’t have a fixed height then it’s important to wait for images loaded before laying out the grid. I’ll update the docs on the next release to explain both cases.

    Thanks again for the input.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Plugin Breaks Masonry Style’ is closed to new replies.