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

Sandra Vu
Sandra Vu
3,525 Points
Posted by Sandra Vu
Sandra Vu
3,525 Points

Is this tutorial still useful for the latest version of Jquery?

I did notice some differences during the walk through. Until I realize that the image on overlay got centered before any of my modification to the CSS file.

Andrew instructed adding a margin to the img to center it. Yet it got centered already!

I inspected and the style comes from element.style {}

An explanation from the internet

"element.style is the style that's defines on the element - directly - using style=""

It's the royal flush of element selectors. It's the most specific, un-over-ridable setting. It's in the source!

so it's coming from the jquery code itself, written in at runtime".

I am using the latest version, hence the differences with the video. Should Treehouse update this tutorial?

4 Answers

Helmut Granda
Helmut Granda
10,343 Points
Helmut Granda
Helmut Granda
10,343 Points

It would be interesting to see your source code (possible workspace?). jQuery by default does not center all images on the page, that would be a nightmare to maintain and would definitely affect anyone using jQuery.

Cory Ramirez
Cory Ramirez
4,257 Points
Cory Ramirez
Cory Ramirez
4,257 Points

I can too verify the OP's issue. I'm using the latest jQuery CDN and the images are already centered, and in addition the anonymous function used to hide the overlay upon clicking isn't working.

Sandra Vu
Sandra Vu
3,525 Points
Sandra Vu
Sandra Vu
3,525 Points

Hi Helmut. Great to hear from you. Here is my code.

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

$overlay.append($image); //Add overlay $("body").append($overlay); //Capture the click event

$("#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(); })

//Overlay clicked, hide the overlay $overlay.click(function(){ $("$overlay").hide();

})

Helmut Granda
Helmut Granda
10,343 Points
Helmut Granda
Helmut Granda
10,343 Points

Hi Sandra Vu

Your workspace doesn't work, after looking at your code I right away noticed an issue on the first line where quotes are not escaped inside the string.

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

should be

var $overlay=$("<div id=\"overlay\"></div>"); var $image =$("img");
Helmut Granda
Helmut Granda
10,343 Points
Helmut Granda
Helmut Granda
10,343 Points

Hi Cory Ramirez,

Would you mind sharing your workspace? Or at least the steps to reproduce?

Cory Ramirez
Cory Ramirez
4,257 Points
Cory Ramirez
Cory Ramirez
4,257 Points

Hi Helmut,

Just kidding, I found a bug in my code. I'm not sure how to explain its impact as to why the images were already being centered, but once I fixed my $image variable from:

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

to:

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

it works. I did not realize I had my closing quote within my ending bracket, but it fixed the issue. Interesting why the images still showed up even with the tag being incorrect? Any explanation for that?

Helmut Granda
Helmut Granda
10,343 Points
Helmut Granda
Helmut Granda
10,343 Points

There may be other code in place that is centering the images. I tried $("<img">); and as expected it throws an error.

http://codepen.io/helmutgranda/pen/KWWapp