I been looking at this over and over and I don't understand what it's asking me to do.

Question

jQuery Basics Challenge Task 1 of 1

You know what? The alt attribute should be more descriptive of what the image is. The title attribute is better use for a caption in our lightbox. I've updated the index.html with placeholder text for all the alt attributes and added title attributes. Have a look for yourself in index.html file the new markup. Pay close attention to where the title attributes are now. This will be the text for our caption.

Alter the existing code to use the correct attribute for the caption.

js/app.js

//Problem: User when clicking on image goes to a dead end
//Solution: Create an overlay with the large image - Lightbox

var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $caption = $("<p></p>");

//An image to overlay
$overlay.append($image);

//A caption to overlay
$overlay.append($caption);

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

//Capture the click event on a link to an image
$("#imageGallery a").click(function(event){
  event.preventDefault();
  var imageLocation = $(this).attr("href");
  //Update overlay with the image linked in the link
  $image.attr("src", imageLocation);

  //Show the overlay.
  $overlay.show();

  //Get child's title attribute and set caption
  var captionText = $(this).children("img").attr("alt");
  $caption.text(captionText);
});

//When overlay is clicked
$overlay.click(function(){
  //Hide the overlay
  $overlay.hide();
});

index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <title>Image Gallery</title>
</head>
<body>
  <h1>Image Gallery</h1>
  <ul id="imageGallery">
    <li><a href="images/refferal_machine.png"><img src="images/refferal_machine.png" width="100" alt="Image of Refferal Machine" title="Refferal Machine By Matthew Spiel"></a></li>
    <li><a href="images/space-juice.png"><img src="images/space-juice.png" width="100" alt="Image of Space Juice" title="Space Juice by Mat Helme"></a></li>
    <li><a href="images/education.png"><img src="images/education.png" width="100" alt="Image of Education" title="Education by Chris Michel"></a></li>
    <li><a href="images/copy_mcrepeatsalot.png"><img src="images/copy_mcrepeatsalot.png" width="100" alt="Image of Wanted: Copy McRepeatsalot" title="Wanted: Copy McRepeatsalot by Chris Michel"></a></li>
    <li><a href="images/sebastian.png"><img src="images/sebastian.png" width="100" alt="Image of Sebastian" title="Sebastian by Mat Helme"></a></li>
    <li><a href="images/skill-polish.png"><img src="images/skill-polish.png" width="100" alt="Image of Skill Polish" title="Skill Polish by Chris Michel"></a></li>
    <li><a href="images/chuck.png"><img src="images/chuck.png" width="100" alt="Image of Chuck" title="Chuck by Mat Helme"></a></li>
    <li><a href="images/library.png"><img src="images/library.png" width="100" alt="Image of Library" title="Library by Tyson Rosage"></a></li>
    <li><a href="images/boat.png"><img src="images/boat.png" width="100" alt="Image of Boat" title="Boat by Griffin Moore"></a></li>
    <li><a href="images/illustrator_foundations.png"><img src="images/illustrator_foundations.png" width="100" alt="Image of Illustrator Foundations" title="Illustrator Foundations by Matthew Spiel"></a></li>
    <li><a href="images/treehouse_shop.jpg"><img src="images/treehouse_shop.jpg" width="100" alt="Image of Treehouse Shop" title="Treehouse Shop by Eric Smith"></a></li>
  </ul>
  <script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

Answer 1 · 2015-10-06T00:08:11Z

October 6, 2015 12:08am

Hi, Odalis. I think they want you to use the 'title' attribute instead of the 'alt' attribute for the caption. Here's the code. I put question mark where the change needs to occur.

//Problem: User when clicking on image goes to a dead end
//Solution: Create an overlay with the large image - Lightbox

var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $caption = $("<p></p>");

//An image to overlay
$overlay.append($image);

//A caption to overlay
$overlay.append($caption);

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

//Capture the click event on a link to an image
$("#imageGallery a").click(function(event){
  event.preventDefault();
  var imageLocation = $(this).attr("href");
  //Update overlay with the image linked in the link
  $image.attr("src", imageLocation);

  //Show the overlay.
  $overlay.show();

  //Get child's title attribute and set caption
  var captionText = $(this).children("img").attr("???");
  $caption.text(captionText);
});

//When overlay is clicked
$overlay.click(function(){
  //Hide the overlay
  $overlay.hide();
});

Answer 2 · 2015-12-02T05:44:10Z

December 2, 2015 5:44am

Dry Answer:

In line number 28 change .attr ("alt"); to .attr ("title"); My friend will work.

28 var captionText = $(this).children("img").attr("alt");

28 var captionText = $(this).children("img").attr("title");

Answer 3 · 2015-10-20T14:46:10Z

October 20, 2015 2:46pm

//Problem: User when clicking on image goes to a dead end //Solution: Create an overlay with the large image - Lightbox

var $overlay = $('<div id="overlay"></div>'); var $image = $("<img>"); var $caption = $("<p></p>");

//An image to overlay $overlay.append($image);

//A caption to overlay $overlay.append($caption);

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

//Capture the click event on a link to an image $("#imageGallery a").click(function(event){ event.preventDefault(); var imageLocation = $(this).attr("href"); //Update overlay with the image linked in the link $image.attr("src", imageLocation);

//Show the overlay. $overlay.show();

//Get child's title attribute and set caption var captionText = $(this).children("img").attr("title"); $caption.text(captionText); });

//When overlay is clicked $overlay.click(function(){ //Hide the overlay $overlay.hide(); });

Answer 4 · 2015-12-03T01:31:39Z

December 3, 2015 1:31am

Confusingly and frustrating why do this coder give us his entire thesis

Answer 5 · 2015-12-02T01:51:42Z

December 2, 2015 1:51am

The entire code does not make much sense, I may not be able to finish these track after all.

Answer 6 · 2015-11-27T16:13:44Z

November 27, 2015 4:13pm

Correct Answer ...

//Problem: User when clicking on image goes to a dead end //Solution: Create an overlay with the large image - Lightbox

var $overlay = $('<div id="overlay"></div>'); var $image = $("<img>"); var $caption = $("<p></p>");

//An image to overlay $overlay.append($image);

//A caption to overlay $overlay.append($caption);

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

//Capture the click event on a link to an image $("#imageGallery a").click(function(event){ event.preventDefault(); var imageLocation = $(this).attr("href");

//Update overlay with the image linked in the link $image.attr("src", imageLocation);

//Show the overlay. $overlay.show();

//Get child's title attribute and set caption var captionText = $(this).children("img").attr("title"); $caption.text(captionText); });

//When overlay is clicked $overlay.click(function(){ //Hide the overlay $overlay.hide(); });

Answer 7 · 2015-12-03T02:47:04Z

December 3, 2015 2:47am

When we learn a new programming language, we must continue to face, we can not hold on to small problems. keep learning.

Answer 8 · 2015-12-03T04:52:44Z

December 3, 2015 4:52am

Gonzalo Make sure you understand calculus because it will come up everywhere coding and programming and help to understand language ...
You need understanding of exactly how computers work and why they work the way they do, no just coding... Practice a lot, move on, understand calculus makes your life easier to code the computer.

Answer 9 · 2017-08-17T06:18:53Z

August 17, 2017 6:18am

Add only title in this line of code

var captionText = $(this).children("img").attr("title");

Answer 10 · 2016-05-08T15:09:36Z

May 8, 2016 3:09pm

put in the attribute title

Welcome to the Treehouse Community

Looking to learn something new?

odalis garcia

odalis garcia

I been looking at this over and over and I don't understand what it's asking me to do.

10 Answers

Kelly von Borstel

Kelly von Borstel

MUZ140946 Simon Taanisa

MUZ140946 Simon Taanisa

Ary de Oliveira

Ary de Oliveira

Lotte Bloem

Lotte Bloem

MUZ140946 Simon Taanisa

MUZ140946 Simon Taanisa

MUZ140946 Simon Taanisa

MUZ140946 Simon Taanisa

Gonzalo Calderon

Gonzalo Calderon

Gonzalo Calderon

Gonzalo Calderon

Ary de Oliveira

Ary de Oliveira

Ary de Oliveira

Ary de Oliveira

Ary de Oliveira

Ary de Oliveira

Ary de Oliveira

Ary de Oliveira

Vipin Singh

Vipin Singh

Khan Ali Paiwandzada

Khan Ali Paiwandzada