How JustAnswer Works:
  • Ask an Expert
    Experts are full of valuable knowledge and are ready to help with any question. Credentials confirmed by a Fortune 500 verification firm.
  • Get a Professional Answer
    Via email, text message, or notification as you wait on our site.
    Ask follow up questions if you need to.
  • 100% Satisfaction Guarantee
    Rate the answer you receive.
Ask Michael Hannigan Your Own Question
Michael Hannigan
Michael Hannigan, IT Expert
Category: Software
Satisfied Customers: 11817
Experience:  25+ Years Experience in Field. MCSE, ICCP. Software Integration and Deployment Expert
Type Your Software Question Here...
Michael Hannigan is online now
A new question is answered every 9 seconds

I have jQuery masonry applied to posts on a WordPress site.

Customer Question

I have jQuery masonry applied to posts on a WordPress site. I am also using load more.
When the load more button is pressed, I can not get masonry to be applied. I'm assuming I need to add masonry(.layout) somewhere, but I can't figure it out.
Here is the dummy site with the code exactly like the client site will be:
I have the following for my masonry file
var $container = jQuery('#masonry-grid');
$container.imagesLoaded( function(){
itemSelector: '.item',
columnWidth: 325,
isFitWidth: true,
isAnimated: true
Submitted: 2 years ago.
Category: Software
Expert:  Michael Hannigan replied 2 years ago.

Hello. My name is***** can help you with your question.

So does it appear that if only one of those 2 is enabled you're able to get that one to run properly? There is sometimes a setting for word press or a word press plug-in that allows you to check it that says to allow for compatibility mode or to allow J query to run in compatibility mode so that more than one process can use it. But I'll be happy to take a look at what's going on.

Customer: replied 2 years ago.
Hi Michael. The masonry is firing on page load. I just need it to trigger again every time the load more is activated. I wrote the masonry.js file myself and the load more is a plugin. Thanks for the suggestion on the plugin settings, but I did look at the settings.If you think an admin login will help you solve this or FTP I will provide. I'm fairly certain it needs something in the masonry js along the lines of masonry.(layout) to be triggered every time a page load happens. I just haven't been able to figure it out myself. Are you familiar with masonry methods?
Expert:  Michael Hannigan replied 2 years ago.

Yes, so what I think you're looking for is masonry('reloadItems')

Because you're getting the initial page to load and just need it for the load more – so I think that will do it.

Customer: replied 2 years ago.
Could you be more specific on how to put that into the js file? It doesn't work.
Expert:  Michael Hannigan replied 2 years ago.

Actually, I can give you a link to the demo. This will provide you with the reload and reloaditems in context.

And here is the code that does this

var $boxes = $( boxMaker.makeBoxes() );
$container.prepend( $boxes ).masonry( 'reload' );

boxmaker is just the script that creates random text for the demo.

Customer: replied 2 years ago.
HI Michael,I've actually been through all the masonry documentation myself. the prepend and append (append would actually be more appropriate in this case) are methods of masonry, not anything to do with ajax load more. This method will not work for me, as it's not possible to call dynamic WP content this way.