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 jQuery Basics (2014) Creating a Simple Lightbox Fixing the Simple Lightbox

Software Singh
Software Singh
7,123 Points

please help!! fixing the simple light box

please help i m not able to solve this problem

  1. i pass the first part of task and reach to second
  2. then i solve the second part of the problem but it says that "first part isn't passing"

please help me

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){

  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>

3 Answers

Steven Parker
Steven Parker
216,017 Points

I don't see the code you added to make Task 1 pass, either!

You need to leave what you added for Task 1 in when you make the changes for Task 2.

I'll give a hint for the second part. Look for the title of the img.

Software Singh
Software Singh
7,123 Points

ya.. i did the same thing. but it says that it seems that first task isn't passing

Steven Parker
Steven Parker
216,017 Points

The code you included above will not pass either challenge task. It looks like the code you start with on the first challenge.

To pass task 1, you must do something to prevent the default behavior of following the the link when an image is clicked. Once you have done that and passed task 1, you will leave that code in as you deal with task 2.

Then, for task 2 you want to fix it so the caption shows the same text as hovering over the image does. Remember that hovering over an image displays the title value, not the alt value. If you fix that and still have the code you added for task 1, you should pass task 2.