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 1

Jerry Schrader
Jerry Schrader
4,396 Points
Posted by Jerry Schrader
Jerry Schrader
4,396 Points

prevent default not working

Keeps opening link:

//Problem: User when clicking on image goes to a dead end
//Solution: Create an overlay with the large image - Lightbox

// 1. Capture the click event on a link to an image
$( '#imageGallery a' ).click(function( event ) {
  event.preventDefault();
  var href = $(this).attr("href");
  console.log(href);
});
// 1a. Show the overlay
  // 1b. Update overlay with the image linked in the link
  // 1c. Get child's alt attribute and set caption

// 2. Add overlay
  // 2a. An image
  // 2b. A caption

// 3. When overlay is clicked
  // 3a. Hide ovelay

2 Answers

Pedro Sousa
seal-mask
.a{fill-rule:evenodd;}techdegree
Pedro Sousa
Python Development Techdegree Student 18,546 Points
Pedro Sousa
.a{fill-rule:evenodd;}techdegree
Pedro Sousa
Python Development Techdegree Student 18,546 Points

Hey Jerry!

How does your HTML look?

The selector you are using ("#imageGallery a") should work for any link inside of any element with the Id "imageGallery".

The anonymous function looks correct as it is, so maybe its the selector that you are passing that is not right.

Are you using the workspace? Are you sure the HTML is correct? Maybe you did the HTML a little diferrent, or you missed just a little something ;)

Let me know if you're still stuck after reading this.

,Pedro

simon iribarren
simon iribarren
7,909 Points
simon iribarren
simon iribarren
7,909 Points

Hey Pedro ! It was indeed the AdBlock wich prevented me to make the event.preventDefault() work ! Thanks

Jerry Schrader
Jerry Schrader
4,396 Points
Jerry Schrader
Jerry Schrader
4,396 Points

Yes. I am using the workspace. I was using Firefox to do the workspace, and chrome on my other monitor to follow the tutorial, somehow they got intermingled. I think the issue is resolved, however, the last few days, when I try to use the Workspace, it locks the window I have the tutorial loaded in, and I have to close the window and relaunch it. Weird.

thanks for your time Pedro.

Pedro Sousa
seal-mask
.a{fill-rule:evenodd;}techdegree
Pedro Sousa
Python Development Techdegree Student 18,546 Points
Pedro Sousa
.a{fill-rule:evenodd;}techdegree
Pedro Sousa
Python Development Techdegree Student 18,546 Points

I'm glad that helped.

That is weird. I've been following the Full-Stack Javascript Track and I haven't noticed that. I mostly use chrome (or sometimes Safari). Doesn't the workspace get launched on a popup window? Maybe there's something going on with any popup blocker?