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!

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 michael singh
michael singh
5,927 Points

adding a lightbox to a webpage

I am trying to add a lightbox I have made in the jquery course to the webpage I had made in the HTML/CSS course.

here is my javescript code:

//Problem: User when clicking on image goes to a dead end

//Solution: Create an overlay with the large image - Lightbox

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

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

//An image to overlay

$overlay.append($image);

//Add overlay

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

  //A caption

//Capture the click event on a link to an image

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

  //Get child's alt attribute and set caption

});

//When overlay is clicked

$overlay.click(function(){

  //Hide the overlay

  $overlay.hide();

});

the images it is effecting are wrapped in a div called gallery

michael singh
michael singh
5,927 Points

here is the html code

<section> <ul id = "gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in photoshop</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80's style of glows.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using photoshop brushes.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetition</p> </a> </li> </ul> </section>

2 Answers

Jesse Zelaya
Jesse Zelaya
13,539 Points
Jesse Zelaya
Jesse Zelaya
13,539 Points

Your JavaScript seems to be fine. I think the issue lies in the html. There is whitespace surrounding "="

 <ul id = "gallery">

Should be: 

 <ul id="gallery">
michael singh
michael singh
5,927 Points

thanks Jesse, but I tried that and it still does not work :/

Jesse Zelaya
Jesse Zelaya
13,539 Points
Jesse Zelaya
Jesse Zelaya
13,539 Points

Strange. I took your code and checked it on codepen. Seems to be working fine for me. You can check it out and see for yourself here.

michael singh
michael singh
5,927 Points
michael singh
michael singh
5,927 Points

So I just tried it again and it seems to be working now, not sure what was going. But thanks! I really appreciate it!