Search code examples
javascriptjqueryjquery-isotopepackery

Isotope with packery gives Error: No layout mode: packery


Im trying to use Isotope with packery but I keep geting the following error "Error: No layout mode: packery"

Heres the code:

Html :

      <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="https://raw.githubusercontent.com/metafizzy/isotope-packery/master/packery-mode.pkgd.min.js"> </script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>

Javascript/Jquery :

   var $portfolio = $('.isotope');
   $portfolio.imagesLoaded(function() {
       $portfolio.isotope({
         layoutMode: 'packery',
           isOriginLeft: true,
           stagger: 30,
           masonry: {
             percentPosition: true
           },
           packery: {
            gutter: 10
          }
       });
       $portfolio.isotope();

   });

I've tried both the minified version and the normal.

With the minified I get Error: No layout mode: packery

With the normal one I get TypeError: Outlayer is undefined


Solution

  • Your using the wrong version of isotope. You need to use the current version, v3, here, not v2.2.2. You also need to load packery-mode.pkgd.min.js after isotope.