CODEWITHSUNDEEP
jquerymasonry
dwinnbrown
dwinnbrown

Reputation: 4009

Reloading masonry content

I am trying to update the layout of a masonry page when the height of an element is changed. I would like the elements to automatically re-fit like they do if you resize the window. I have tried numerous methods and am now at this which seems to do nothing:

function masonryReload() {
                jQuery('#container').masonry('reloadItems');
            }

Am I missing something here or is there another method that is better suited to what I want?

If anyone has any experience with this, it would be much appreciated.

UPDATES: JS Function:

function masonryReload() {
            jQuery('#container').masonry('reload');
        }

HTML:

 <li id="logo" style="padding-right: 25px;" onclick="masonryReload();"><img src="<?php bloginfo('template_directory'); ?>/img/logo.png"></li>

Upvotes: 0

Views: 855

Answers (1)

Bram Vanroy
Bram Vanroy

Reputation: 28505

.masonry('reload')

It's defined in the docs, however simply using .masonry() again should do the trick.

Following your code. Move away from the inline onclick handler, and put it all inside JS:

HTML

<li id="logo" style="padding-right: 25px"><img src="<?php bloginfo('template_directory'); ?>/img/logo.png"></li>

JS

function masonryInit() {
    jQuery("#container").masonry();
    console.log("It works!");
}

jQuery(document).ready(function() {
    masonryInit();
    $("#logo").click(masonryInit());
});

Upvotes: 2

Related Questions