0

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

Community
  • 1
  • 1
Kuzma
  • 679
  • 1
  • 12
  • 36

1 Answers1

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));
 });
 });
Macsupport
  • 5,406
  • 4
  • 29
  • 45
  • Great! Thank you! Your's script doesn't throw any error messages – Kuzma Sep 26 '14 at 19:21
  • Only last question regarding multiple instances left – Kuzma Sep 26 '14 at 19:27
  • Here is a post that may help [Post](http://stackoverflow.com/questions/17815116/jquery-isotope-multiple-instances-on-the-same-page). – Macsupport Sep 26 '14 at 19:37
  • Yes, I've seen this. But with 2.0 version or with my updated init script it doesn't work. Placing the var $container = [$('#posts'), $('#posts-new')], for starters instead of var $container = $('#posts'), produces error *** $container.isotope is not a function itemSelector: '.item',*** – Kuzma Sep 26 '14 at 19:49
  • 1
    Here is a simple jsfiddle with 2 isotope containers [Example](http://jsfiddle.net/macsupport/YL8gH/72/) – Macsupport Sep 26 '14 at 23:02
  • Thank you for you answer. Could you help me to finish it with the code from you second example? I've tried in several ways - but had no luck. The last my try doesn't work: $(document).ready(function() { var $container = [$('#posts'), $('.example')]; isotope = function () { jQuery.each($container, function (j) { this.isotope({ itemSelector: '.element' }); }); $container.imagesLoaded( function() { isotope(); $(window).on('debouncedresize', isotope); }(jQuery)); }); – Kuzma Sep 27 '14 at 07:21