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 4

Posted by john larson
john larson
16,594 Points

using $(this) instead of $("imageGallery a") doesn't work. Just curious why?

// the first line: this is how andrew does it in the video
 $("#imageGallery a").click(function(event){
  event.preventDefault();
  var imageLocation = $(this).attr("href");
  $image.attr("src", imageLocation);
  var captionText = $(this).children("img").attr("alt");
  $caption.text(captionText);
  $overlay.fadeIn(500);


});

$($overlay).click(function(){
  $overlay.fadeOut(500);
})


// I would think that this would also work, but it does something odd instead
$(this).click(function(event){
  event.preventDefault();
  var imageLocation = $(this).attr("href");
  $image.attr("src", imageLocation);
  var captionText = $(this).children("img").attr("alt");
  $caption.text(captionText);
  $overlay.fadeIn(500);


});

$($overlay).click(function(){
  $overlay.fadeOut(500);
})
Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

Eric Stermer — you should move this from a comment to an answer. (Good answer! :+1:)

john larson
john larson
16,594 Points

Eric, I'm further thinking of the answer you gave, which I appreciate. So then $(this) doesn't actually mean this very thing that is clicked. It means whatever was previously selected? or something like that?

Eric Stermer
Eric Stermer
9,499 Points
Eric Stermer
Eric Stermer
9,499 Points

John, You are correct, This does NOT refer to the element selected to click. saying $(this).click() is really for your purpose doing nothing. but went you say $(element).click( this.someMethod();) this is now refering to the element. (which i know the syntax there is terrible but it is just to give you a better visual).

2 Answers

Eric Stermer
Eric Stermer
9,499 Points
Eric Stermer
Eric Stermer
9,499 Points

your this in the jQuery selector for the click event is referring only to the object that is up the chain from where you are using this. So in your case this is referring to the document object instead of your image gallery link.

you have the right idea inside the click function using the this to refer to the element that is being clicked but, clicking this does not refer to your desired button.

// the first line: this is how andrew does it in the video
 $("#imageGallery a").click(function(event){
  event.preventDefault();
  var imageLocation = $(this).attr("href");// "this" is referring to #imageGallery a
  $image.attr("src", imageLocation);
  var captionText = $(this).children("img").attr("alt");
  $caption.text(captionText);
  $overlay.fadeIn(500);


});

$($overlay).click(function(){
  $overlay.fadeOut(500);
})


// I would think that this would also work, but it does something odd instead
$(this).click(function(event){
// since this is being called in the document object, "this" refers to document
// what you are saying here is $(document).click(function(event){
  event.preventDefault();
  var imageLocation = $(this).attr("href");
  $image.attr("src", imageLocation);
  var captionText = $(this).children("img").attr("alt");
  $caption.text(captionText);
  $overlay.fadeIn(500);


});

$($overlay).click(function(){
  $overlay.fadeOut(500);
})
Sergey Blokhin
Sergey Blokhin
9,612 Points
Sergey Blokhin
Sergey Blokhin
9,612 Points

If images have different sizes, when we open it they may be too big , how do we can change size of the image? I tried $image.css({"width: "50%", height: "50%"}); But javascript gets broken after adding it.