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

Leonard Morrison
PLUS
Leonard Morrison
Courses Plus Student 32,914 Points
Posted by Leonard Morrison
Leonard Morrison
Courses Plus Student 32,914 Points

I'm running into some trouble here.

Apparently, I keep running into this issue: TypeError: $image.attr is not a function; (I use a Google App that detects JS errors).

Anyways, I can't seem to figure out why this seems to be an issue.

Snapshot of the workspace: https://w.trhou.se/sodnus4q32

In case you need the code immediately:

//Problem: user when clicking on image goes to dead end.
//Solution: Make a matchbox for the gallery


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

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


//1) Capture the click event on a link to an image.
$("#imageGallery a").click(function(event){
                           event.preventDefault();
                           var imageLocation = $(this).attr('href');
                           console.log(imageLocation);
                           $image.attr("src", imageLocation);
                           //^ Here's the apparent problem.
                           $overlay.show();

                           });


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


               })

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%;



}

1 Answer

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

What Jennifer is calling the "alternative" suggestion is correct. :white_check_mark:

Jennifer's "alternate" suggestion was to add a $ before the parentheses on this line:

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

:point_right: The first suggestion (which was: "$($image).attr("src", imageLocation);") will not work because the JQuery object it sets the attribute on will not be attached to the document.

And putting a $ in front of a variable name has no special meaning to JavaScript. But it is a common convention to name variables that will be used to hold JQuery objects this way, since the $ itself is associated with JQuery. It just makes reading the code easier.

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

Ok, I guess I'm wrong, but I sincerely don't understand why. When I try it, it works. What am I missing?

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

When you say "it works", you probably mean it doesn't cause an error.

But it also doesn't change the attribute on the image inside the overlay that was attached to the document, which is the purpose of that line of code. The object it sets the attribute on is created by that line, and not assigned to a variabe or appended to the document, so it cannot be referenced later. It will exist "in limbo". :wink:

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

OK, but now I have to edit mine so it makes sense again. :stuck_out_tongue_winking_eye:

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

You're probably just tired — your analysis is normally spot-on. And you did get it right the 2nd time. :+1:

Leonard Morrison
Leonard Morrison
Courses Plus Student 32,914 Points
Leonard Morrison
Leonard Morrison
Courses Plus Student 32,914 Points

Thank you for loading the code. It was a pain to keep the code from a window loaded before and look at the current window.