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

Not sure why the challenge will not accept the answer I've given, need a confirmation

The challenge on part 2 gives me an error of task 1 is no longer running.

I'm pretty sure I placed in the correct answer for the code to draw upon the title attribute in an img instead of what was originally the alt as it alluded that I needed to change, but once I submit it I get an error that task 1 is no longer running, which was adding a $event.preventDefault(); line.

Of course those two things aren't affecting each other, or shouldn't be, so I don't know why or what to do to complete the challenge.

It looks like someone's reintroduced an issue we sorted out before. The captions in the lightbox are wrong. For example, it's showing "Image of Space Juice" rather than "Space Juice by Mat Helme".

//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();
});
Colin Marshall
Colin Marshall
32,861 Points

Can you please link us to the challenge? Thanks!

For future reference, If you click the "ask a question" link on the page of the challenge or the video you have a question about, your post will be automatically linked to that challenge/video.

1 Answer

A Laypanov
A Laypanov
27,579 Points

You are passing "event" argument to the function handling click event, so you should use event.preventDefault().