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 2

Srdjan Cestic
Srdjan Cestic
6,855 Points
Posted by Srdjan Cestic
Srdjan Cestic
6,855 Points

Where I make mistake?

When I click on photo it go to ''dead end'', but I put event.preventDefault already. https://w.trhou.se/hkdmvy75sx

2 Answers

Sergey Podgornyy
Sergey Podgornyy
20,660 Points
Sergey Podgornyy
Sergey Podgornyy
20,660 Points

First, you have conflicting double quotes in your JavaScript file:

var $overlay = $("<div id = "overlay"></div>");

It must be like this:

var $overlay = $("<div id ='overlay'></div>");

Second, add height property to #overlay element:

#overlay {
  background:rgba(0,0,0,0.7);
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  display:none;
  text-align:center;
}

You can also compare your code with mine - https://github.com/SergeyPodgornyy/treehouse-projects/tree/master/jquery/3_-_Image_gallery

Srdjan Cestic
Srdjan Cestic
6,855 Points
Srdjan Cestic
Srdjan Cestic
6,855 Points

Thanks for help Sergey and sorry for late reply! :)

edeharrison
seal-mask
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points
edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

Hi Srdjan,

It looks like you have conflicting double quotes here which is probably causing a problem:

var $overlay = $("<div id = "overlay"></div>");

It should be something like this:

var $overlay = $("<div id = 'overlay'></div>");

or:

var $overlay = $('<div id = "overlay"></div>');

Hope that helps,

Ede

Srdjan Cestic
Srdjan Cestic
6,855 Points
Srdjan Cestic
Srdjan Cestic
6,855 Points

Hi Ede, I changed it, but when I click now I don't go anywhere, before I go to ''dead end'', now I don't get any respond.

edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

Hi Srdjan,

Ah, sorry then. I'm not familiar with that course so I don't know what the problem would be. I just wanted to point out the code error in case that was the issue.

Good luck,

Ede