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
Michael Plemmons
9,393 PointsNot working
I can't get it to work right. Nothing happens when I click on the overlay to get rid of the image. It was working fine until I started adding caption. Then caption didn't show up and I couldn't get rid of image by clicking on overlay. I took away the caption part and the step before isn't working. Here's my code. (not sure what's going on here but the vars are defined right now as i type it, but as soon as i post it, it shows up as empty strings).
var $overlay = $('<div id="overlay"></div>'); var $image = $("<img>"); var $caption = $("<p></p>");
//add image to overlay $overlay.append($image); / //Add caption to overlay $overlay.append($caption);
//Add 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 overlay with the image linked to the link $image.attr("src", imageLocation);
//Show the overlay $overlay.show();
var captionText = $(this).children("img").attr("alt"); $caption.text(captionText); });
//When overlay is clicked $overlay.click(function(){
//Hide the overlay $overlay.hide(); });
7 Answers
Michael Davidson
5,519 PointsOkay so here is my finished version of this project.
//Problem: User when clicking on a image goes to a dead end
//Solution: Create a overlay with the large image - Lightbox
//define overlay, image, and caption
var $overlay = $('<div id="overlay"></div>');
var $image = $('<img>');
var $caption = $('<p></p>');
//An image
$overlay.append($image);
//Add overlay
$("body").append($overlay);
//A caption
$overlay.append($caption);
//Capture the click event on a link to an image
$("#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();
//Get child's alt attribute and set caption
var $captionText = $(this).children('img').attr('alt');
$caption.text($captionText);
});
//When overlay is clicked
$overlay.click(function(){
//Hide the overlay
$overlay.hide()
});
The only thing I changed on your code? I put these in
var $overlay = $('<div id="overlay"></div>');
var $image = $('<img>');
var $caption = $('<p></p>');
You didn't have your variables defined in the code example you posted and it worked for me.
Michael Plemmons
9,393 Pointswow that's weird. In my code, those variables are defined. It just didn't copy over when I pasted. I made some minor adjustments with the order and using single quotes instead of double and got my code to look exactly like yours but no difference. Still not working. Maybe something happened in my HTML file. Kind of weird that some of the jQuery would work but not all of it. Here's my code again:
//Problem: User when clicking on image goes to dead-end //Solution: Create an overlay with the large image - Lightbox
var $overlay = $('<div id="overlay"></div>'); var $image = $('<img>'); var $caption = $('<p></p>');
//add image to overlay $overlay.append($image);
//Add overlay $("body").append($overlay);
//Add caption to overlay $overlay.append($caption);
//Capture the click event on a link to an image
$("#imageGallery a").click(function(event) {
event.preventDefault();
var imageLocation = $(this).attr("href");
//update overlay with the image linked to the link
$image.attr('src', imageLocation);
//Show the overlay $overlay.show();
var $captionText = $(this).children('img').attr('alt'); $caption.text($captionText); });
//When overlay is clicked $overlay.click(function(){
//Hide the overlay $overlay.hide(); });
Michael Plemmons
9,393 Pointsand here's my HTML code:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8"> <title>Image Gallery</title> </head> <body> <h1>Image Gallery</h1> <ul id="imageGallery"> <li><a href="images/refferal_machine.png"><img src="images/refferal_machine.png" width="100" alt="Refferal Machine By Matthew Spiel"></a></li> <li><a href="images/space-juice.png"><img src="images/space-juice.png" width="100" alt="Space Juice by Mat Helme"></a></li> <li><a href="images/education.png"><img src="images/education.png" width="100" alt="Education by Chris Michel"></a></li> <li><a href="images/copy_mcrepeatsalot.png"><img src="images/copy_mcrepeatsalot.png" width="100" alt="Wanted: Copy McRepeatsalot by Chris Michel"></a></li> <li><a href="images/sebastian.png"><img src="images/sebastian.png" width="100" alt="Sebastian by Mat Helme"></a></li> <li><a href="images/skill-polish.png"><img src="images/skill-polish.png" width="100" alt="Skill Polish by Chris Michel"></a></li> <li><a href="images/chuck.png"><img src="images/chuck.png" width="100" alt="Chuck by Mat Helme"></a></li> <li><a href="images/library.png"><img src="images/library.png" width="100" alt="Library by Tyson Rosage"></a></li> <li><a href="images/boat.png"><img src="images/boat.png" width="100" alt="Boat by Griffin Moore"></a></li> <li><a href="images/illustrator_foundations.png"><img src="images/illustrator_foundations.png" width="100" alt="Illustrator Foundations by Matthew Spiel"></a></li> <li><a href="images/treehouse_shop.jpg"><img src="images/treehouse_shop.jpg" width="100" alt="Treehouse Shop by Eric Smith"></a></li> </ul> <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body> </html>
Michael Plemmons
9,393 Pointsnot sure if it's related either but here's the CSS.
body { font-family: sans-serif; background: #384047; } h1 { color: #fff; text-align: center }
ul { list-style:none; margin: 0 auto; padding: 0; display: block; max-width: 780px; text-align: center; } ul li { display: inline-block; padding: 8px; background:white; margin:10px; } ul li img { display: block; } a { text-decoration: none; } /** Start Coding Here **/
overlay {
background: rgba(0,0,0,0.7); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; text-align: center; }
overlay img {
margin-top:10%; }
Michael Davidson
5,519 PointsHmmm have you tried directly copy pasting my code to see if it works with your stuff? If you do and it doesn't its likely the CSS or HTML as I passed that course with it...
I'm trying to see if there is antyhing I might be missing.
Michael Plemmons
9,393 PointsNo I haven't. I'll try that. My code looks exactly like the teacher;s and like your. It just doesn't like my computers lol,
Michael Plemmons
9,393 PointsHmm well it's working now, I just went to one of the earlier videos with code that wasn't complete. Completed it there and it worked just fine. Maybe it was the version of workspace that was opened on the video where he added captions was buggy. Not saving right or something. Thanks for your help.