Initiate Masonry jQuery Plugin for Image Gallery

i am creating an Image Gallery consuming the Flickr API to retrieve my photos. I have found the need to use 2 plugins for it: “Masonry” and “ImagesLoaded

The images can throw off Masonry layouts and cause item elements to overlap. ImagesLoaded resolves this issue.

This is basically an example of i want to do.

My steps in my ember-cli app ( i am using ember 1.13.11)

Install the plugins by bower

Imported in my brocfile.js


Create a component with the jQuery logic

import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement : function(){
    this._super();'afterRender', this, this.afterRenderEvent);

  afterRenderEvent : function(){
    var $grid = this.$('.grid').masonry({
      itemSelector: '.grid-item',
      percentPosition: true,
      columnWidth: '.grid-sizer'
    // layout Isotope after each image loads
    $grid.imagesLoaded().progress( function() {

in my component template the div with grid class:

<div class='grid'>

In my Route i have


This is the console log error

Why masonry is not initiated ? What might be the error?

It sounds like it masonry was not imported properly. I’m not sure why that would be, perhaps the path isn’t exactly correct? Try opening your developer console and running !!$.prototype.masonry. If it comes back true, clearly it’s being imported correctly. If not, then I’d check the path of the .js package.

FWIW I think ember-cli warns/errors on unfound imports.

Have you tried the addon that’s been made for that?

yes, it is imported correctly

I have tried this, less complicate

Masonry plugin is now initiated but still not resizing the images.

I have made a video reproducing the issue, comparing the debugs between the demo working and in my application

See here

I have sorted with this addon GitHub - pitchtarget/ember-cli-pt-masonry: Ember CLI Addon for Masonry grid layout library reusing the same component i have created @workmanw @alexspeller