title: Trying to use Shuffle.js but getting Uncaught TypeError: Shuffle is not a constructor
body: <p>This ought to be a simple enough question for those in the know- why am I getting this error in my console? I have tried following along with the code that appears under "usage" on the <a href="https://vestride.github.io/Shuffle/" rel="nofollow">Shuffle homepage</a> but I think the page is neglecting to include all of the steps for getting started with the library. </p>
  
  <p>Here is my code on my index file located within the shufflejs folder created when the library was installed.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Shuffle Test&lt;/title&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;       
  &lt;/script&gt; 
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="grid" class="row my-shuffle-container"&gt;
  &lt;figure class="col-4@sm picture-item" data-groups='["photography"]' data-date-created="2010-09-14" data-title="Baseball"&gt;
  &lt;div class="aspect aspect--16x9"&gt;
    &lt;div class="aspect__inner"&gt;
      &lt;img src="/img/baseball.png" alt="" height="145" width="230"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;figcaption&gt;Baseball&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure class="col-4@sm picture-item" data-groups='["wallpaper","3d"]' data-date-created="2011-08-14" data-title="Tennis"&gt;
  &lt;div class="aspect aspect--16x9"&gt;
    &lt;div class="aspect__inner"&gt;
      &lt;img src="/img/tennis-ball.png" alt="" height="145" width="230"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;figcaption&gt;Tennis&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure class="col-4@sm picture-item" data-groups='["wallpaper","3d"]' data-date-created="2009-05-27" data-title="iMac"&gt;
  &lt;div class="aspect aspect--16x9"&gt;
    &lt;div class="aspect__inner"&gt;
      &lt;img src="/img/imac.png" alt="" height="145" width="230"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;figcaption&gt;iMac&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;div class="col-1@sm my-sizer-element"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  var Shuffle = window.shuffle;
  var element = document.getElementById('grid');
  var sizer = element.querySelector('.my-sizer-element');
  
  var shuffle = new Shuffle(element, {
  itemSelector: '.picture-item',
  sizer: sizer // could also be a selector: '.my-sizer-element'
  });
  // Overrideable options
  Shuffle.options = {
  group: Shuffle.ALL_ITEMS, // Initial filter group.
  speed: 250, // Transition/animation speed (milliseconds).
  easing: 'ease', // CSS easing function to use.
  itemSelector: '*', // e.g. '.picture-item'.
  sizer: null, // Element or selector string. Use an element to determine     the size of columns and gutters.
  gutterWidth: 0, // A static number or function that tells the plugin how wide the gutters between columns are (in pixels).
  columnWidth: 0, // A static number or function that returns a number which tells the plugin how wide the columns are (in pixels).
  delimeter: null, // If your group is not json, and is comma delimeted, you could set delimeter to ','.
  buffer: 0, // Useful for percentage based heights when they might not always be exactly the same (in pixels).
  columnThreshold: 0.01, // Reading the width of elements isn't precise enough and can cause columns to jump between values.
  initialSort: null, // Shuffle can be initialized with a sort object. It is the same object given to the sort method.
  throttle: throttle, // By default, shuffle will throttle resize events. This can be changed or removed.
  throttleTime: 300, // How often shuffle can be called on resize (in milliseconds).
  staggerAmount: 15, // Transition delay offset for each item in milliseconds.
  staggerAmountMax: 250, // Maximum stagger delay in milliseconds.
  useTransforms: true, // Whether to use transforms or absolute positioning.
  };
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>