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

Christopher Wallace
Christopher Wallace
6,277 Points
Posted by Christopher Wallace
Christopher Wallace
6,277 Points

My overlay does not appear to be showing and it appears to be going to the default

// Solution: User when clicking on image goes to a dead end i.e. poor experience // Solution: Create an overlay with a large image or Simple Lightbox var $overlay = ('<div id = "overlay"></div>'); var $image = $("<img>");

//Add an image $overlay.append($image);

//Add an overlay $("body").append($overlay);

// Add an caption

//Capture a click command on a link to an image $("#imageGallery a").click(function(event){

event.preventDefault(); var imageLocation = $(this).attr("href");

//Update the overlay with the image linked in the link $image.attr("src", imageLocation);

//Show the overlay $overlay.show();

});

//1.3 Get child alt attribute and set it as the caption

//3. When overlay is clicked //3.1 Hide the overlay

john larson
john larson
16,594 Points 
var $overlay = ('<div id = "overlay"></div>'); 
var $image = $("<img>");
//Add an image 
$overlay.append($image);
//Add an overlay 
$("body").append($overlay);
// Add an caption
//Capture a click command on a link to an image 
$("#imageGallery a").click(function(event){
    event.preventDefault(); 
var imageLocation = $(this).attr("href");
//Update the overlay with the image linked in the link 
$image.attr("src", imageLocation);
//Show the overlay 
$overlay.show();

});
john larson
john larson
16,594 Points

I just like to format the code

6 Answers

Tracy Excell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points
Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

Hello,

I have just finished this task and mine is working. Your code looks similar to mine. Have you completed the styling in the css? This might be why it is not showing. If you are still having problems let me know and I can share my code.

Christopher Wallace
Christopher Wallace
6,277 Points
Christopher Wallace
Christopher Wallace
6,277 Points

sure go ahead and send it I have no clue why it doesn't work

john larson
john larson
16,594 Points
john larson
john larson
16,594 Points

Im gonna try and run it, look for what it might be

$("#imageGallery a").click(function(event){
    event.preventDefault();// this is what is supposed to prevent it from going to default
//and it looks ok to me
Christopher Wallace
Christopher Wallace
6,277 Points
Christopher Wallace
Christopher Wallace
6,277 Points

yeah idk dude i just checked it out it should work perfect haha

Christopher Wallace
Christopher Wallace
6,277 Points
Christopher Wallace
Christopher Wallace
6,277 Points

overlay {

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

overlay img {

margin-top:10%;

} //heres my css code if that is the problem idk

Tracy Excell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points
Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

Here is my code, ignore the button stuff, I am now trying to get it to scroll from image to image.

var $overlay = $('<div id="overlay"></div>'); var $image = $("<img>"); var $caption = $("<p></p>"); //botton attemp var $buttonNext = $("<button> > </button>"); var $buttonPrevious = $("<button> < </button>");

//var $thisImage = $(this).attr("img"); //var $nextImage =$thisImage.next("img"); //var $previousImage

//an image $overlay.append($image);

//a caption to overlay $overlay.append($caption);

//attemting to add buttons. This worked now need to get them to scroll fowards and back.

$overlay.append($buttonPrevious); $overlay.append($buttonNext);

// add an overlay $("body").append($overlay);

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

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

//update the overlay with the image linked in the link $image.attr("src", imageLocation);

// Show the overlay $overlay.show();

//Get child alt attribute and set caption

var captionText = $(this).children("img").attr("alt"); $caption.text(captionText);

} );

//When overlay is clicked

$overlay.click(function() { overlay.hide(); })

//trying to get buttons to function

//$("$buttonNext").click(function(){ $thisImage.remove(); $thisImage.next("img"); $nextImage.show(); });

//2.4 hide the overlay

john larson
john larson
16,594 Points

You have quite a thing going here, can't wait to see how it plays out :D