"Bad Masonry element: [object Object]"

Question

Trying to incorporate the latest version of Masonry, I'm clueless as to what this error means. In the console, I get this message:

Bad masonry element: [object Object] plugins.js:16
y plugins.js:16
n plugins.js:16
(anonymous function) script.js:24
c jquery.js:3048
p.fireWith jquery.js:3160
x.extend.ready jquery.js:433
q

My script -

var $container = $('#container');

$container.imagesLoaded( function(){
    var msnry = new Masonry( $container, {
        columnWidth: 320,
        itemSelector: '.item'
    });
});

I've made sure to include the imagesLoaded plugin, the same error is displayed even if I rule this out. It seems to be referring to my plugins.js file where I've stored the code for Masonry, but I've not modified anything.

score 14 · Accepted Answer · answered Aug 27 '13 at 12:02

14

You are passing jQuery object ($container) to the Masonry constructor which doesn't expect it. You can change it to $container[0] to get the DOM element from jQuery object:

$container.imagesLoaded( function(){
    var msnry = new Masonry( $container[0], {
        columnWidth: 320,
        itemSelector: '.item'
    });
});

or use jQuery initialization:

$container.imagesLoaded( function(){
        $container.masonry({
            columnWidth: 320,
            itemSelector: '.item'
        });
    });

answered Aug 27 '13 at 12:02

Grin

6,082
2
22
15

Thanks. I wanted to use the jQuery initialisation but that gave me another error in that the masonry layout disappears after images have been loaded. But I guess using that callback is the right approach. – Staffan Estberg Aug 29 '13 at 05:16

"Bad Masonry element: [object Object]"

1 Answers1