"Bad Masonry Element: [Object Object]"

Question

Trying to include the latest version of Freemasonry, I do not know 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 is

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

I have included the imagesLoaded plugin, the same error is displayed even if I exclude it. This seems to apply to my plugins.js file, where I saved the code for Freemasonry, but I didn't change anything.

Answer 1

You are passing a jQuery object ( $container ) to the freemason constructor who is not expecting it. You can change it to $container[0] to get the DOM element from the 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' }); });