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 trialChristopher Wallace
6,277 PointsMy 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
16,594 PointsI just like to format the code
6 Answers
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 PointsHello,
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
6,277 Pointssure go ahead and send it I have no clue why it doesn't work
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 PointsMy computers Internet is down will add code once sorted.
john larson
16,594 PointsIm 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
6,277 Pointsyeah idk dude i just checked it out it should work perfect haha
Christopher Wallace
6,277 Pointsoverlay {
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
Front End Web Development Techdegree Graduate 15,333 PointsHere 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
16,594 PointsYou have quite a thing going here, can't wait to see how it plays out :D
john larson
16,594 Pointsjohn larson
16,594 Points