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 Le Var Range
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points

the text method doesn't work in my js file.

// JavaScript Document

  // appending div to the body //


      var $para = $("<p></p>");

     var $image = $("<img>");

      var $overlay = $("<div id='overlay'></div>");





      //                 AdDiNg OvErLaY aNd iMaGe WiTh TeXt             //




      $image.append($para);

      $overlay.append($image);

     $("body").append($overlay);


     // iMaGe CliCk FuNcTiOn ShOwInG oVeRlAy            //


      $(".pic-nav li a").click( function(e) {

           e.preventDefault();

           var loc = $(this).attr("href");

             var captionTex = $(this).attr("alt"); 

            $image.attr("src", loc);

             $para.text(captionTex);


            $overlay.show();

     });

         $image.click( function() {

             $overlay.hide(); 

         });

            ``` js



          this is the whole file.. for the beginning of making a interactive photo album.

2 Answers

David Morisset
David Morisset
13,323 Points
David Morisset
David Morisset
13,323 Points

It's because you are appending a paragraph to an image here $image.append($para);. Image elements can not have children in the DOM.

The method to have an image with a caption is to use this markup :

<figure>
    <img src='image.jpg' alt='missing' />
    <figcaption>Caption goes here</figcaption>
</figure>

which translates to this jquery :

var $fig = $("<figure></figure>");
var $image = $("<img>");
var $caption = $("<figcation></figcation>");

$fig.append($image);
$fig.append($caption);

Hope this helps

Le Var Range
seal-mask
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points
Le Var Range
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/normalize.css"/>
<link rel="stylesheet" href="css/grey_poupon.css"/>
<title>Photo Gallery</title>
</head>

<body>
<header class="main-head">
  <input type="text" name="search" id="search" placeholder="enter a selection"/>
</header>
<div class="photo-container clearfix">
  <ul class="pic-nav ">
          <li><a href="img/01.jpg"  alt="Hey Bales I love hay bales. Took this snap on a drive through the countryside past some straw fields."><img src="img/thumb-img/01.jpg" alt="image 01"/></a></li>
          <li><a href="img/02.jpg"  alt="Lake The lake was so calm today. We had a great view of the snow on the mountains from here."><img src="img/thumb-img/02.jpg" alt="image 02"/></a></li>
          <li><a href="img/03.jpg"  alt="Canyon I hiked to the top of the mountain and got this picture of the canyon and trees below."><img src="img/thumb-img/03.jpg" alt="image 03"/></a></li>
          <li><a href="img/04.jpg"  alt=" Iceberg It was amazing to see an iceberg up close, it was so cold but didn't snow today."><img src="img/thumb-img/04.jpg" alt="image 04"/></a></li>
          <li><a href="img/05.jpg"  alt="The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons"><img src="img/thumb-img/05.jpg" alt="image 05"/></a></li>
          <li><a href="img/06.jpg"  alt="Fall Fall is coming. I love when the leaves on the trees start to change color."><img src="img/thumb-img/06.jpg" alt="image 06"/></a></li>
          <li><a href="img/07.jpg"  alt="Plantation I drove past this plantation yesterday, everything is so green!"><img src="img/thumb-img/07.jpg" alt="image 07"/></a></li>
          <li><a href="img/08.jpg"  alt="Dunes My summer vacation to the Oregon Coast. I love the sandy dunes!"><img src="img/thumb-img/08.jpg" alt="image 8"/></a></li>
          <li><a href="img/09.jpg"  alt="Countryside Lane We enjoyed a quiet stroll down this countryside lane."><img src="img/thumb-img/09.jpg" alt="image 9"/></a></li>
          <li><a href="img/10.jpg"  alt="Sunset Sunset at the coast! The sky turned a lovely shade of orange."><img src="img/thumb-img/10.jpg" alt="image 10"/></a></li>
          <li><a href="img/11.jpg"  alt="Cave I did a tour of a cave today and the view of the landscape below was breathtaking."><img src="img/thumb-img/11.jpg" alt="image 11"/></a></li>
          <li><a href="img/12.jpg"  alt="Bluebells I walked through this meadow of bluebells and got a good view of the snow on the mountain before the fog came in."><img src="img/thumb-img/12.jpg" alt="image 12"/></a></li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
      <script src="js/lightbox.js"></script>
</body>
</html>

           ```html

 this is the html... I received some help in on the slack channel .. I am going to follow along with what another person advised but I would like you to check to see what could be the problem thank you.
David Morisset
David Morisset
13,323 Points

I stick to what i wrote in my answer. Appending a paragraph to an image will simply not work. If you want the text to appear below the image, you have to either append it to the overlay or use the figure and caption elements that i described in my answer. The figure and caption solution is best practice.

As a side note, alt attributes should be used with images, for anchor elements you should use title instead.