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

Lightbox exercise .attr

In reference to the lightbox exercise:

sample HTML of one of the images:

<ul id="imageGallery"> <li><a href="images/refferal_machine.png"><img src="images/refferal_machine.png" width="100" alt="Refferal Machine By Matthew Spiel"></a></li>

Javascript:

$("#imageGallery a").click(function(event){ event.preventDefault(); var imageLocation = $(this).attr("href"); $image.attr("src", imageLocation);Subject: Three down...

The .attr on the last line changes the "src" to be equal to href of #imageGallery a. I'm confused as they hold the exact same value on each image! In above html example, both href and src = "images/refferal_machine.png". So what are we really changing by setting the image attribute src = "images/refferal_machine.png" ??

2 Answers

Hey Chris, the difference between the two in this case is that the href for the anchor tag is the link that opens the image when you click on the thumbnail. The thumbnail in this scenario would be the img tag and to display that thumbnail on the page you need to link it by using src attribute. It is the same link but if you used only the anchor tag in this scenario with no img tag, you will not see a thumbnail on the page.

Thank you Huy