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

Posted by Zachary Fine
Zachary Fine
10,110 Points

JQUERY lightbox

Lightbox is not working. It is still going to the default link which doesnt make sense given that I used event.preventDefault();. Please help???

<script>

//Problem: User when click on image goes to dead end
//solution: create an overlay with a large image - Lightbox
var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $caption = $("<p></p>");
$overlay.append($image);

overlay.append($caption); 

$("body").append($overlay);
//1. Capture the click event on a link to an image
$("#imageGallery a").click(function(event){
  event.preventDefault();
  var imageLocation = $("this").Attr("href");
  $image.attr("src", imageLocation);
$overlay.show();
  var captionText = $(this).children("img").attr("alt");
  $caption.text(captionText);
});

$overlay.click(function(){
  $(this).hide();
};

</script>
Nathan Hungate
Nathan Hungate
9,222 Points

I noticed a few issues in your code.

You omitted the $ on overlay when appending the caption

overlay.append($caption);

and you capitalized attr when defining the variable imageLocation

  var imageLocation = $("this").Attr("href");

Fix those up and let us know how your code runs afterwards

1 Answer

thomascawthorn
thomascawthorn
22,986 Points
thomascawthorn
thomascawthorn
22,986 Points

Before you're preventDefault, try alerting something:

alert('made it to click function');

If you can't see this, you may have a syntax error or have a typo in your ID names.

Also .attr should probably be lowercase but I'm not sure if this matters:

 var imageLocation = $("this").Attr("href");

Take a look at your post - I've added markup so you can see how to do it in the future