Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Savannah Lynn
Savannah Lynn
13,662 Points

Do I have to call the Lightbox2 function for the plugin to run? It is not stated in the documentation.

I am using a Lightbox2 plugin by Lokesh Dhakar. It is not stated anywhere in the documentation that I need to call the function, or how to call the function. I am brand new to plugins and this is the first time I have encountered this.

Here is the documentation: http://lokeshdhakar.com/projects/lightbox2/

I have tried several different versions of jQuery.

<!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 href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
  <link rel="stylsheet" href="js/lightbox/lightbox.min.css">
  <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" data-lightbox="photos" alt="Hay Bales" data-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" data-lightbox="photos" alt="Lake" data-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" data-lightbox="photos" alt="Canyon" data-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" data-lightbox="photos" alt="Iceberg" data-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" data-lightbox="photos" alt="Desert" data-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" data-lightbox="photos" alt="Fall" data-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" data-lightbox="photos" alt="Plantation" data-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" data-lightbox="photos" alt="Dunes" data-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" data-lightbox="photos" alt="Countryside Lane" data-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" data-lightbox="photos" alt="Sunset" data-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" data-lightbox="photos" alt="Cave" data-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" data-lightbox="photos" alt="Bluebells" data-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
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
  <script type="text/javascript" src="js/lightbox/lightbox.min.js"></script>
  <script type="text/javascript" src="js/app.js"></script>

</body>

</html>

fixed code formatting

1 Answer

Umesh Ravji
Umesh Ravji
42,362 Points

Hi Savannah, if you look at the example, the data-lightbox attribute is on the a element, not the img elements. That's why it doesn't appear to be running.

Savannah Lynn
Savannah Lynn
13,662 Points

Thank you! That worked!