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 Perform: Part 3

Posted by James Dawson
James Dawson
520 Points

event.preventDefault(); not stopping link to whole picture

when i launch the page in workspace is does not stop taking me to the whole image when I click on the img link. I doubled checked that my javascript was turned on and I have even used a newer javascript link too see if it would help but to no avail. If anyone can help me out it would be much appreciated!

//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>'); $("body").append($overlay);

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

//1.1 Show the overlay. //1.2 Update overlay with the image linked in the link //1.3 Get child's alt attribute and set caption

}); //2. Add overlay //2.1 An image //2.2 A caption //3. When overlay is clicked //3.1 Hide the overlay

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

When I try the code snippet you posted with my own files, it works as expected. Could you post a workspace snapshot so we can take a look at the rest of you file structure?

3 Answers

Peter Rossing
Peter Rossing
12,920 Points
Peter Rossing
Peter Rossing
12,920 Points

Looks like you're missing a few things to get the image to show up as an overlay within the same page:

After the line where you declare the $overlay variable, you need to declare a variable for the image that you're going to put into the overlay ---

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

In the next line, before you append the overlay to the body of the document, you need to append the image to the overlay ---

    $overlay.append($image);

That gets things set up, but there's also one more thing to add farther down in the function for the click event. After you declare the variable that you named href, you need to tell that variable where you want it to get the image from. So the next line should be ---

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

Then you can go on to show the overlay.

There's more code needed to make the overlay go away on a click, but I think that's spelled out in the video. It's been a while since I went through this video, but I think all these steps are covered in there at some point. It's easy to miss a line here and there when trying to keep up with the videos and then it can be really hard to go back through and figure out what's wrong!

Thomas Katalenas
Thomas Katalenas
11,033 Points
Thomas Katalenas
Thomas Katalenas
11,033 Points 
var $overlay = $('<div id = "overlay"></div>');
var $image = $('<img>');

$overlay.append($image);

$("body").append($overlay); //adding overlay to index body.



$("#imageGallery a").click(function(event){
  event.preventDefault(); //prevents default takes event as part of doc example, behavior of going to another page to look at the picture.
  var imageLocation = $(this).attr("href");  // this, is particular anchor you clicked on. href is the rest of the name?
  console.log(href);

  $image.attr("src", imageLocation): // gets the src from <img> and reads the href name.

  $overlay.show();

});

the overlay doesn't work its just a picture in the upper left hand with a white background...

Peter Rossing
Peter Rossing
12,920 Points
Peter Rossing
Peter Rossing
12,920 Points

a couple things:

1) Your variable named imageLocation is set up to get the source of the image that corresponds to the thumbnail clicked by the user. The console log line is supposed to show you the address of that image in the console, but in an earlier version of your code, you'd named that same variable href instead of imageLocation, so now you also need to change the variable name in the console.log function. (There's not a variable named href any more, so that's keeping it from working.)

2) Also, look for a colon at the end of one of your lines where there should be a semi-colon.