CODEWITHSUNDEEP
phpjqueryajaxjquery-masonry
Jazerix
Jazerix

Reputation: 4801

Can't reload jQuery Masonry

I got a site that shows 25 images. I've created a button that says "Load More". The buttons pull 25 images from a php script via Ajax. This part is actually working fine. The problem is, I'm using jquery masonry to align the images.

Right now, it calls the Masonry function when the page is loaded.

function Masonry() {
    var $container = $('#fit');
    $container.imagesLoaded(function () {
        $container.masonry({
            itemSelector: '.masonryImage'
        });
    });
}

However, when I want to call the Masonry() function afterwards, it doesn't work.

If I don't call the Masonry() on load, it works fine in my ajax function.

Any ideas as to why this happens?

Upvotes: 1

Views: 1363

Answers (2)

publicmat
publicmat

Reputation: 851

Calling a bulk masonry() again after the reload fixed this issue for me.

$('#fit').append(newitems).masonry('reloadItems').masonry();

Upvotes: 1

mike
mike

Reputation: 7177

You need to call appended to add the new items to the masonry container:

$('#fit').masonry( 'appended', newitems);

FYI: as an alternative to using a "Load More" button, take a look at using Infinite Scroll: http://masonry.desandro.com/demos/infinite-scroll.html

Upvotes: 0

Related Questions