Search code examples
jqueryhtmlcssmaterializeparallax

Parallax Materialize not Initializing

I think that I've initialized the code, but I still can't get the images to come up. I've also only been coding for two days, so I have no idea what else could be going wrong. This is my code so far. Thanks! 

    <!DOCTYPE html>
    <html>
    <head>
        <title>About Me</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
       <link rel="stylesheet" type="text/css" href="bio.css"> 
       <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
       <script src="jquery-3.2.1.min.js"></script>         
   </head>
   <body>
       <div class="parallax-container">
           <div class="parallax"><img src="http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/H-P/pig-young-closeup.ngsversion.1412640764383.adapt.945.1.jpg"></div>
       </div>   
       <div class="row container">
           <h2>About Me</h2>
           <p>words about me</p>
       </div>
       <div class="parallax-container">
           <div class="parallax"><img src="http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/H-P/pig-young-closeup.ngsversion.1412640764383.adapt.945.1.jpg"></div>
       </div>
       <script>
       $(document).ready(function(){
        $('.parallax').parallax();
        });
       </script>
       <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
       <script type="text/javascript" src="js/materialize.min.js"></script>
   </body>
   </html>
Solution

  • Edited code

    <!DOCTYPE html>
<html>
<head>
<title>About Me</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="bio.css">
<!--  commented Line     
<link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
<script src="jquery-3.2.1.min.js"></script>
-->
</head>

<body>
<div class="parallax-container">
    <div class="parallax">
        <img src="https://www.petfinder.com/wp-content/uploads/2013/05/120251710-632x3531.jpg"></div>
</div>
<div class="row container">
    <h2>About Me</h2>
    <p>words about me</p>
</div>
<div class="parallax-container">
    <div class="parallax"><img src="https://www.petfinder.com/wp-content/uploads/2013/05/120251710-632x3531.jpg"></div>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script>
//rearranged query - below the jquery and materialize library 
    $(document).ready(function() {
        $('.parallax').parallax();
    });
</script>
</body>

</html>