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

WANJYUN WANG
WANJYUN WANG
8,539 Points
Posted by WANJYUN WANG
WANJYUN WANG
8,539 Points

Ans of these 2 challenge

I've no idea how to fix these,can someone just give me the ans?

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("**title**"); 
$caption.text(captionText); });

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

//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>
Gustavo Winter
Gustavo Winter
Courses Plus Student 27,382 Points
Gustavo Winter
Gustavo Winter
Courses Plus Student 27,382 Points

Hello Wanjyun,

I will give you a little hint, check this event.preventDefault()

Try apply this event on the line 19 and check what happens.

If you want the answer or if it helps you, let me know =D

1 Answer

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

It actually looks like you've completed the challenge.

Except that in addition to adding the right code, there are some extra stray symbols and a few lines have been combined with the comments that precede them. I would think this was a lack of formatting, but I also see your code is properly formatted (perhaps by the "get help" button).

So look it over again, remove stray symbols (like "**$" and several "**"), and check that the code lines are not mixed up with the comments. You might just start the challenge over and (carefully) put in the same answers (1 new line and one word change).