14

So I've got a strange problem that I can't seem to find anywhere else, regarding masonry.js.

I've got the latest (3.10) version and I'm including it in my wordpress theme's functions.php file as so:

function enqueue ()
{
    wp_register_script( 'masonry', get_stylesheet_directory_uri() . '/js/masonry.js', array( 'jquery' ) );
    wp_enqueue_script( 'masonry' );
}

add_action( 'wp_enqueue_scripts', 'enqueue');

Which is loading the script fine. As it is now, I'm not doing anything else with it, but the script is failing:

Uncaught TypeError: Cannot call method 'create' of undefined masonry.js?ver=3.5.2:37

Seems like it cannot call create on the window.Outerlayer as it doesnt exist.

Here's the code in question, starting at line 34 from the masonry.js:

// used for AMD definition and requires
function masonryDefinition( Outlayer, getSize ) {
  // create an Outlayer layout class
  var Masonry = Outlayer.create('masonry');

  Masonry.prototype._resetLayout = function() {
    this.getSize();
    this._getMeasurement( 'columnWidth', 'outerWidth' );
    this._getMeasurement( 'gutter', 'outerWidth' );
    this.measureColumns();

    // reset column Y
    var i = this.cols;
    this.colYs = [];
    while (i--) {
      this.colYs.push( 0 );
    }

    this.maxY = 0;
  };

I've tried enqueueing the script in different ways, as well as pulling it in only when $(document).ready() (which I believe wordpress' enqueue_script does anyway?).

So, does anyone have any ideas what the problem or conflict could be here? Or has anyone experienced anything similar?

(I'm using jQuery 1.83, though masonry shouldn't require jquery according to the site.)

josh
  • 543
  • 5
  • 20
  • I'm having this same issue - did you ever get it resolved? – timshutes Aug 13 '13 at 05:16
  • @timshutes Just now actually, it appears to work if you include both the script and the code to execute it in a template directly, ie: not with wordpress enqueue_script. I'm going to look into this a bit further and see if I can figure *why* this works. But give that a try for now. – josh Aug 15 '13 at 10:16
  • I played with this forever. There's a call on line 37 there (where you get the error) to a function from a different library. I'm going to post a full answer and see if this helps. – timshutes Aug 15 '13 at 20:36

1 Answers1

33

I had this exact problem. My guess is that you're using just the raw masonry.js file from github. This version of masonry requires a few other plugins to work correctly.

Specifically, you're getting this error because you don't have Outlayer installed. If you're just looking to get masonry up and running, you should grab the full production package from the masonry website here. It includes the necessary plugins.

Hope this helps!

timshutes
  • 2,239
  • 3
  • 21
  • 28