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 trialjohn larson
16,594 Pointsusing $(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);
})
john larson
16,594 PointsEric, 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
9,499 PointsJohn, 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
9,499 Pointsyour 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
9,612 PointsIf 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.
Steven Parker
231,275 PointsSteven Parker
231,275 PointsEric Stermer — you should move this from a comment to an answer. (Good answer! )