Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Savannah Lynn
Savannah Lynn
13,662 Points

JavaScript console says my plugin file cannot be found. My HTML and CSS are validated. I am using a new, updated plugin.

I am attempting to attach the jQuery plugin for a lightbox called "Chocolat." The plugin is not running and the console is giving me an error message that the plugin file cannot be found.

This is for the image gallery project on the Front-End Web Development Track. Here is my code. Please let me know what I can do to fix this.

Both plugin files (CSS and JavaScript) are nested in a "chocolat" folder which is nested in my "js" folder. I have already doubled checked spelling and file location. I simply downloaded these two files from the plugin site and put them in my own folders in my workspace.

<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Project 4 - Photo Gallery</title>

<link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="js/chocolat/chocolat.css"> <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"> <link rel="stylesheet" href="css/main.css"> </head> <body> <div id="container">

<input type="search" placeholder="Search(16pt)">
<div class="chocolat-parent">
<ul>

  <li><a class="chocolat-image" href="photos/01.jpg"><img src="photos/01.jpg" alt="Hay Bales" title="I love hay bales. Took this snap on a drive through the countryside past some straw fields."></a></li>

 <li><a class="chocolat-image" href="photos/02.jpg"><img src="photos/02.jpg" alt="Lake" title="The lake was so calm today. We had a great view of the snow on the mountains from here."></a></li>

 <li><a class="chocolat-image" href="photos/03.jpg"><img src="photos/03.jpg" alt="Canyon" title="I hiked to the top of the mountain and got this picture of the canyon and trees below."></a></li>

  <li><a class="chocolat-image" href="photos/04.jpg"><img src="photos/04.jpg" alt="Iceberg" title="It was amazing to see an iceberg up close, it was so cold but didn’t snow today."></a></li>

  <li><a class="chocolat-image" href="photos/05.jpg"><img src="photos/05.jpg" alt="Desert" title="The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons."></a></li>

  <li><a class="chocolat-image" href="photos/06.jpg"><img src="photos/06.jpg" alt="Fall" title="Fall is coming, I love when the leaves on the trees start to change color."></a></li>

  <li><a class="chocolat-image" href="photos/07.jpg"><img src="photos/07.jpg" alt="Plantation" title="I drove past this plantation yesterday, everything is so green!"></a></li>

  <li><a class="chocolat-image" href="photos/08.jpg"><img src="photos/08.jpg" alt="Dunes" title="My summer vacation to the Oregon Coast. I love the sandy dunes!"></a></li>

  <li><a class="chocolat-image" href="photos/09.jpg"><img src="photos/09.jpg" alt="Countryside Lane" title="We enjoyed a quiet stroll down this countryside lane."></a></li>

  <li><a class="chocolat-image" href="photos/10.jpg"><img src="photos/10.jpg" alt="Sunset" title="Sunset at the coast! The sky turned a lovely shade of orange."></a></li>

  <li><a class="chocolat-image" href="photos/11.jpg"><img src="photos/11.jpg" alt="Cave" title="I did a tour of a cave today and the view of the landscape below was breathtaking."></a></li>

  <li><a class="chocolat-image" href="photos/12.jpg"><img src="photos/12.jpg" alt="Bluebells" title="I walked through this meadow of bluebells and got a good view of the snow on the mountain before the fog came in."></a></li>

</ul>
</div>

</div>

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <script type="text/javascript" src="js/chocolat/jquery.chocolat.min.js"></script> <script type="text/javascript" src="js/app.js"></script> </body>

</html>

1 Answer

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Try checking your dependency on jquery. The documentation for the plugin states It expects jQuery to work (either 1.x or 2.x), so try bumping down a version to see if that fixes it.

Savannah Lynn
Savannah Lynn
13,662 Points

Thank you!! I really appreciate the tip!