title: $(...).Jcrop is not a function
body: <p>I have read articles on </p>
  
  <blockquote>
    <p>'$(...)Jcrop is not a function'.</p>
  </blockquote>
  
  <p>I have ensured that I have not included the Jcrop links twice.</p>
  
  <p>JCrop seems to be giving me trouble</p>
  
  <p>Can someone please help.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="styles.css" /&gt;
  &lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery.Jcrop.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/jquery.Jcrop.min.css" /&gt;
  
      &lt;div class="profile-pic"&gt;
          &lt;label&gt;Profile Pic&lt;/label&gt;
          &lt;input type="file" name="profile_pic" id="profile-pic-input"&gt;
          &lt;img src="images/volunteer.jpg" id="profile-pic"&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>JQUERY:</p>
  
  <pre><code>$(document).ready(function(){
      $('#profile-pic-input').change(function(){
          readURLProfile(this);
      });
  
      $('#profile-pic-input').change(function(){
          $('#profile-pic').Jcrop();
      });
  
      function readURLProfile(input) {
          if(input.files&amp;&amp;input.files[0]) {
              var reader = new FileReader();
              reader.onload=function(e) {
                  $('#profile-pic').attr('src',e.target.result);
              }
              reader.readAsDataURL(input.files[0]);
          }
      }
  });
  </code></pre>