Initiate Masonry jQuery Plugin for Image Gallery

@Koala wrote:

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?

Posts: 1

Participants: 1

Read full topic