Initiate Masonry jQuery Plugin for Image Gallery

1

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

app.import('bower_components/imagesloaded/imagesloaded.js');
app.import('bower_components/masonry/dist/masonry.pkgd.min.js');

Create a component with the jQuery logic

//components/masonry-plugin.js
import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement : function(){
    this._super();
    Ember.run.scheduleOnce('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() {
      $grid.masonry();
    });  
  }
});

in my component template the div with grid class:

<div class='grid'>
  {{yield}}
</div>

In my Route i have

{{masonry-plugin}}

This is the console log error

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

2

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.

3

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

http://emberobserver.com/addons/ember-masonry-grid

4

yes, it is imported correctly

5

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

6

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