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

Posted by Dan Neumann
Dan Neumann
Courses Plus Student 10,318 Points

Not able to add caption to javascript lightbox

In jQuery Basics, I'm building a simple lightbox and trying to add the caption. I've added this code:

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

$overlay.append($image);

$overlay.append($caption);

$('body').append($overlay);

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

$image.attr('src', imageLocation);

$overlay.show(); });

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

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

No caption appears. Any ideas?

Marcus Parsons
Marcus Parsons
15,719 Points

Hey Dan,

When posting code to the forums, you should wrap it within 3 backticks as shown in the Markdown Cheatsheet or in this image below. If you don't do that, most things within < and > will be stripped from your pasted code.

If you're working on this project in Workspaces, you can take a snapshot of your Workspace, which will be of the most help, and then paste the URL for the snapshot here on the forum. If you're unaware of how to do that, check out this link: http://www.teamtreehouse.com/forum/workspace-snapshots

code

4 Answers

Marcus Parsons
Marcus Parsons
15,719 Points

Hey Dan,

I see your problem. Your two lines for the caption text should be inside the click function and that solves the problem. In order to use the this object, it has to have something to grab which comes from an event handler. You can't properly call this the way you expect to if you try to call it outside of the event handler like you were doing.

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

  //2.1 Add image to overlay
  $image.attr('src', imageLocation);  
    //1.3 Get child's alt attribute and set caption
  var captionText = $(this).children('img').attr('alt');
  $caption.text(captionText);
  $overlay.show();
});
Dan Neumann
Dan Neumann
Courses Plus Student 10,318 Points

Thanks Marcus that was it.

Dan

Marcus Parsons
Marcus Parsons
15,719 Points

No problem, Dan. Experiment some more with the this object so you can get a feel for how it works. One neat thing is just to bring up the console and type out this and see what it gives you. this is always defined, but it's not always defined to what you would like it to be depending on where you call it from. :P

Grant G
Grant G
19,934 Points
Grant G
Grant G
19,934 Points

Hi Dan,

At the begining, you assigning all your variables to empty jQuery selectors, try defining them like this:

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

And you should get caption text before you show overlay.

$('#imageGallery a').click(function(event) { 
  event.preventDefault(); 
  var imageLocation = $(this).attr('href');
  $image.attr('src', imageLocation);
  //get and set caption text
  var captionText = $(this).children('img').attr('alt'); 
  $caption.text(captionText);
  //show overlay
  $overlay.show(); });

Also you can hide overlay by passing hide method to this insted of $overlay 

$overlay.click(function() { $(this).hide(); });
Marcus Parsons
Marcus Parsons
15,719 Points

Grant,

As I mentioned above, whenever you post code without wrapping it in backticks as you did, HTML tags will not display unless they are posted as HTML entities like this: < and >. So, he more than likely has those selectors in his code, but they aren't displaying properly. See, if i try to type out: var $button = $("<button>Go!</button>"); it won't let me do that, even though on my end it clearly says <button>Go</button>. Understand?

Grant G
Grant G
19,934 Points

Marcus,

You are right, I didn't think about that. Thanks.

Marcus Parsons
Marcus Parsons
15,719 Points

It's no biggie at all. It just saves you some time if you assume that they are there, and ask them to either reformat their code with backticks or post a snapshot of their workspace.

Dan Neumann
PLUS
Dan Neumann
Courses Plus Student 10,318 Points
Dan Neumann
Dan Neumann
Courses Plus Student 10,318 Points

Sorry, my code didn't come out complete. Here is my workspace snapshot. https://w.trhou.se/lwd0dilq08

Dan Neumann
PLUS
Dan Neumann
Courses Plus Student 10,318 Points
Dan Neumann
Dan Neumann
Courses Plus Student 10,318 Points

Thanks for both of your help. I figured out what I was doing wrong. I had this code:

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

out of the function. I put the closing function code after it and it worked. Thanks again.

Marcus Parsons
Marcus Parsons
15,719 Points

Right because of what I told you in my answer that the this object is not defined as you expect it to be if you call it outside of the event handler...