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 A Better Caption

imad mohahammad
imad mohahammad
1,662 Points
Posted by imad mohahammad
imad mohahammad
1,662 Points

need help

code not work

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

What code? Try showing us the code you were trying.

imad mohahammad
imad mohahammad
1,662 Points
imad mohahammad
imad mohahammad
1,662 Points

You know what? The alt attribute should be more descriptive of what the image is. The title attribute is a better use for a caption in our lightbox. I've updated the index.html with placeholder text for all the alt attributes and added title attributes. Have a look for yourself in the index.html file to see the new markup. Pay close attention to where the title attributes are now. This will be the text for our caption. Alter the existing code to use the correct attribute for the caption. //Problem: User when clicking on image goes to a dead end //Solution: Create an overlay with the large image - Lightbox

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

//An image to overlay $overlay.append($image);

//A caption to overlay $overlay.append($caption);

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

//Capture the click event on a link to an image $("#imageGallery a").click(function(event){ event.preventDefault(); var imageLocation = $(this).attr("href"); //Update overlay with the image linked in the link $image.attr("src", imageLocation);

//Show the overlay. $overlay.show();

//Get child's title attribute and set caption var captionText = $(this).children("img").attr("alt"); $caption.text(captionText); });

//When overlay is clicked $overlay.click(function(){ //Hide the overlay $overlay.hide(); });

2 Answers

Juliette Tworsey
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points
Juliette Tworsey
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points

Hi Imad...like two months later.

If you're still there:

You just need to set the .attr value to title so that the caption text will appear along with the title attribute like so:

var captionText = $(this).children("img").attr("title");
  $caption.text(captionText);

Cheers:-)

imad mohahammad
imad mohahammad
1,662 Points
imad mohahammad
imad mohahammad
1,662 Points

//Problem: User when clicking on image goes to a dead end //Solution: Create an overlay with the large image - Lightbox

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

//An image to overlay $overlay.append($image);

//A caption to overlay $overlay.append($caption);

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

//Capture the click event on a link to an image $("#imageGallery a").click(function(event){ event.preventDefault(); var imageLocation = $(this).attr("href"); //Update overlay with the image linked in the link $image.attr("src", imageLocation);

//Show the overlay. $overlay.show();

//Get child's title attribute and set caption var captionText = $(this).children("img").attr("alt"); $caption.text(captionText); });

//When overlay is clicked $overlay.click(function(){ //Hide the overlay $overlay.hide(); });