title: ReferenceError: jQuery is not defined in self invoking function
body: <p>I've tried all the solutions from other Stackoverflow topics, but I can't my jQuery file to work. 
  I use a Wampserver to test my code and I test inside of multiple browsers (Firefox, Chrome, Opera). Same problem every time.</p>
  
  <blockquote>
    <p>HTML<code>
        &lt;script src="js/scripts.js"&gt;&lt;/script&gt;
        &lt;script src="js/jquery-3.2.1.min.js"&gt;&lt;/script&gt;</code></p>
  </blockquote>
  
  <p>I've put these lines before my closing &lt;\body> tag</p>
  
  <blockquote>
    <p>scripts.js`</p>
  </blockquote>
  
  <pre><code>(function($) {
  'use strict';
  
  // holds current image shown
  var $currNr = 0;
  var links, images;
  
  /**
   * Function to prevent closures; adds click event handler to links
   */
  var addEvents = function(nr) {
      // add click event to link
      $(links[nr]).on('click', function(e) {
          showImage(nr);
          e.preventDefault();
      });
  };
  
  /**
   * Function to show an image
   */
  var showImage = function(nr) {
      // find image
      var $img = $(images[nr]);
      if (!$img) return;
  
      // find big image
      var $photoBig = $('#photoBig');
  
      // change
      $photoBig.attr('src', $img.attr('data-src-l'));
      $photoBig.attr('alt', $img.attr('alt'));
  
      // remember current image number
      $currNr = nr;
  };
  
  /**
   * Function to show the next image
   */
  var showNextImage = function() {
      if ($currNr != (links.length - 1)) {
          showImage($currNr + 1);
      } else {
          showImage(0);
      }
  };
  
  /**
   * Function to show the previous image
   */
  var showPrevImage = function() {
      if ($currNr != 0) {
          showImage($currNr - 1);
      } else {
          showImage(links.length - 1);
      }
  };
  
  // start scripts
  $(window).on('load', function() {
      // find images and links
      links = $('#thumbsmenu li&gt;a');
      images = $('#thumbsmenu li&gt;a img');
  
      // add link events
      $(links).each(function(nr) {
          $(this).on('click', function(e) {
              showImage(nr);
              e.preventBubble();
          });
      });
  
  
      // controls
      $('#lnkFirst').on('click', function(e) {
          showImage(0);
          e.preventDefault();
      });
      $('#lnkPrev').on('click', function(e) {
          showPrevImage();
          e.preventDefault();
      });
      $('#lnkNext').on('click', function(e) {
          showNextImage();
          e.preventDefault();
      });
      $('#lnkLast').on('click', function(e) {
          showImage(images.length - 1);
          e.preventDefault();
      });
  
      // keyboard
      $(document).on('keydown', function(e) {
          var $code = (e.keyCode ? e.keyCode : e.which);
          switch (event.keyCode) {
              case 37: showPrevImage(); e.preventDefault(); break;
              case 39: showNextImage(); e.preventDefault(); break;
          }
      });
  
      // play
      var $timer;
      $('#btnPlay').on('click', function(e) {
          if (!$(this).prop('playing')) {
              $(this).val('stop');
              $(this).prop('playing', true);
              $currNr = 0;
              $timer = setInterval(showNextImage, 1000);
          } else {
              $(this).val('start');
              $(this).prop('playing', false);
              clearInterval($timer);
          }
      });
  
  });})(jQuery);`
  </code></pre>
  
  <p>I use a self-invoking function and use it as parameter but I get a:</p>
  
  <blockquote>
    <p>ReferenceError: jQuery is not defined</p>
  </blockquote>
  
  <p>Normally this code should work, that was how I was taught back then. Anyone an idea what could be the real issue here?</p>