jQuery Isotope 2.0 multiple instances on the same page and Images Loaded integration

Question

I've been working with Isotope 2.0 jQuery plugin. Reviewing old examples I've found that many options have changed (initialization and so on...). I've found only one working example which works with 2.0 version:

    $(document).ready(function() {(function ($) {
        var $container = $('#posts'),
            isotope = function () {
                $container.isotope({
                    itemSelector: '.item',
                });
            };
        isotope();
        $(window).on('debouncedresize', isotope);
    }(jQuery));
});

Currently I've two questions: 1). How to integrate this script with Images Loaded plugin. Example from doc won't work because it differs from my init script. 2). I've several div blocks on the site and I'd use them with Isotope independently, in other words the init method should consist from one basic script where I could list available containers and that they would you their own independent filter.

How it could be solved? I've seen similar answer but it works only with 1.5.x version

Answer 1

Here is some simplified code:

 $(document).ready(function() {
  var $container = $('#posts');
   $container.imagesLoaded( function() {
   $container.isotope({
      itemSelector: '.item',
    });
 });
 });

or with your code:

$(document).ready(function() {
var $container = $('#posts'),
isotope = function () {
  $container.isotope({
  itemSelector: '.item',
   });
  };
   $container.imagesLoaded( function() {
  isotope();
    $(window).on('debouncedresize', isotope);
}(jQuery));
 });
 });