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 3

Posted by Susan Rusie
Susan Rusie
10,671 Points

Is something wrong with my code?

My program seems to run the way it is supposed to as long as I have the developer tools open, but not with a full screen. When I click on a picture on the full screen, it works but it covers the 3 middle pictures in the second line of pictures and the bottom picture. The whole top line of pictures are in full view, instead of slightly being uncovered. Just wondering if there are any changes I need to make to make this work the way it is supposed to both ways.

Here is my 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
$("#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();

    //Get child's alt attribute and set caption


});

//When overlay is clicked
$overlay.click(function(){
//Hide the overlay  
    $overlay.hide();
});
Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

For this kind of issue, we probably need to see all the code (HTML and CSS too) plus the associated files since images are involved. Probably the best way to do that would be to make a snapshot of the workspace and provide the link to it.

Susan Rusie
Susan Rusie
10,671 Points

I went back and edited my original question so all the code would be highlighted, so any help would be greatly appreciated.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

I'm in agreement with Steven Parker. We are probably going to also need to see the html and css as well. And as he has pointed out, the snapshot function is the easiest way to go about this.

Susan Rusie
Susan Rusie
10,671 Points

I don't know why, but now it seems to be working just fine. Before it wasn't. I guess Workspaces can be quirky sometimes. I am, however, now stuck on this code challenge for Performance 3 where you have to use jQuery only and add all the links with the class "external" and the "target" attribute with the value of "_blank". What am I missing?

Here is my code for that:

var $trgt = $("target" = "_blank"); 
$("#externalLinks a").click(function(event) { 
  event.preventDefault();
$(".external").append.attr($trgt);
})

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
  <title>Links Page</title>
</head>
<body>
  <h1>Links</h1>
  <ul id ="externalLinks">
    <li><a href="http://google.com" class="external">Google</a></li>
    <li><a href="http://yahoo.com" class="external">Yahoo</a></li>
  </ul>
  <script src="//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>

1 Answer

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

You went a bit overboard with the click handler - that's not needed for this challenge. Your last line was kind of close, thought.

So to target links (a) that have the class external, you'd write this: $("a.external"). Then to add an attribute you'd use .attr() with two arguments, the attribute name and the value. So you'd get something like this:

:warning: SPOILER ALERT

$("a.external").attr("target", "_blank");