Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 4

Shane He
Shane He
7,618 Points

why isn't this working on my browser

//


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

$overlay.append($image);
$overlay.append($caption);

$("body").append($overlay);

$("#imageGallery a").click(function(event){
    event.preventDefault();
    var imageLocation = $(this).attr("href");

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

        $overlay.show();


});


$overlay.click(function(){

    $overlay.hide();
});

//

Edited your comment to add syntax highlighting. :)

1 Answer

On the fourth line of code, you've misspelled $image as $iamge. Other than that, it looks pretty good!

Shane He
Shane He
7,618 Points

thank you ryan. i just did that. and it's still funky..

What browser are you using, and what version? Also, can you open your console (Opt-Cmd-C on Mac, Alt-Ctrl-C on Windows) in your browser and see if there are any errors? If so, what do they say?

Shane He
Shane He
7,618 Points

i'm using the most updated version of chrome on my mac. nothing logs in the console. no errors here... :/

Hmm...if it's at all possible, can I get a screenshot? Also, do you currently have any CSS on the page? If so, do you have any that specifically target the gallery/overlay?

Shane He
Shane He
7,618 Points

ha! figured it out. the problem was in the css alignment and positioning. thanks for trouble shooting. :)

Glad I could help!