Uncaught Error: Script error for: isotope/js/layout-mode

[kasturichavan]

Hi,

Im trying to get my isotope packery working with requireJs. Im getting error where the isotope.js is looking for isotope/js/layout-mode.js file....I want to use packery as the layoutmode.

This is the stuff in my shim: 'isotope': { deps: ['jquery', 'jquery.bridget'] }, 'packery-mode': { deps: ['jquery','packery'] }, 'packery' : { deps:['jquery'] }, 'jquery.bridget': { deps: ['jquery'] } Are the dependencies I have specified right?????

My paths for require.js 'isotope': 'libs/isotope/isotope.pkgd.min', 'packery-mode': 'libs/isotope/packery-mode.pkgd.min', 'packery': 'libs/isotope/packery.pkgd.min', 'jquery.bridget': 'libs/isotope/jquery.bridget'

And I have my rendered layout.js file define([ 'domReady!','jquery','underscore','backbone','marionette', 'event.aggregator','app','util/searchOptionsUtil','util/UriUtil','gallery-carousel', 'isotope','packery-mode' ], function (doc, $, _, Backbone, Marionette, EventAggregator, App, SearchOptionsUtil, UriUtil, gc,Isotope, pm) { var regionPhotosLayout = Backbone.Marionette.Layout.extend({ el: $('#region-photos'), initialize: function () { var $container = $('.container'); console.log($container); $container.isotope({ itemSelector: ".gallery-item", layoutMode: "packery" });

        var gallery = $("#region-gallery");
                     gallery.galleryCarousel({
                         imgSelector: ".inner",
                         imgSrcAttr: "data-original"
                     });
                      }
             });
         return regionPhotosLayout;

});

In my js file ...im including isotope and packery-mode...is that correct?. Not able to understand why im getting the error. I have specified the layoutMode as packery inside the isotope. Hope to find solution on this. Thanks, Kasturi

[kasturichavan]

I did not understand what you said.

[kasturichavan]

What am I doing wrong?

[desandro]

I was able to get Isotope with Packery layout mode, using both .pkgd.js files with this code:

requirejs.config({
  paths: {
    jquery: 'path/to/jquery'
  }
});

requirejs( [
    'require',
    'jquery',
    'path/to/isotope.pkgd.js'
  ],
  function( require, $, Isotope ) {
    require( [
      'jquery-bridget/jquery.bridget',
      'path/to/packery-mode.pkgd.js'
    ],
    function() {
      // Make .isotope() jQuery plugin
      $.bridget( 'isotope', Isotope );
      // init Isotope
      $('#grid').isotope({
        layoutMode: 'packery'
      });
    }
  );
});

The trick is that packery-mode.pkgd.js will look for some dependencies that are already included in isotope.pkgd.js. To resolve that, require isotope.pkgd.js first, then packery-mode.pkgd.js.

[kasturichavan]

Okay. I have one more question. Can i initaialize isotope with packery inside of the renderedlayout.js files I want to. the code you have pasted is a part of main.js right???

[kasturichavan]

And why have you not added paths for isotope and packery-mode in requirejs.config. Isnt that necessary? Im sorry i might be asking stupid questions but Im new to this.

[kasturichavan]

That solved that bug...But now im getting this error:

Uncaught TypeError: Cannot read property 'masonry' of undefined Moreover when I debugged into isope.js ...this.modes of isotopes is undefined.

[jingjiewei]

Hi @kasturichavan , i have the same error: Uncaught TypeError: Cannot read property 'masonry' of undefined. you find a solution to fix this?