title: How do I use Materialbox
body: <p>I am trying to use Materialbox in Materialize, but the zooming effect does not seem to work. While the CSS hover works, clicking does not enlarge the image as it should.</p>
  
  <p>I have tried both the jQuery method and the non-jQuery method shown on the site. I have made sure that jQuery is loaded before the script, and tried both including the script in the html in  tags as well as putting it in another file.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" href="css/materialize.min.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col s12"&gt;
                  &lt;!--This is the where the image is--&gt;
                  &lt;img class="materialboxed" width="300" src="assets/model.jpg"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="js/materialize.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery-3.4.1.min.js"&gt;&lt;/script&gt;
      &lt;!--I used the provided code on the Materialize website--&gt; 
      &lt;script&gt;
          $(document).ready(function(){
              $('.materialboxed').materialbox();
          });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Looking at the console, I get three errors:</p>
  
  <p>Loading failed for the  with source “file:///Users/ned/Desktop/website/js/jquery-3.4.1.min.js”.</p>
  
  <p>ReferenceError: $ is not defined</p>
  
  <p>The character encoding of the HTML document was not declared. The document will render with...</p>
  
  <p>My editor throws the ReferenceError as well whenever I try to use the code snippet in a separate file.</p>