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 zabe sangary
zabe sangary
2,657 Points

How can I add close button to lightBox

I just finished imageGallery lesson in jQuery I wonder how can I add a close button to close the overlay here is my code, thanks in advance for help. var $overlay = $('<div id="overlay"></div>'); var $image = $("<img>"); var $dialog = $('<div id="dialog"> <p>close</p> </div>') //Para to caption overlay var $caption = $("<p></p>") $overlay.append($image); //a caption to overlay $overlay.append($dialog) $overlay.append($caption) $("overlay").append($dialog);

$("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"); $image.attr("src", imageLocation);

$overlay.show(); var captionText = $(this).children("img").attr("alt"); $caption.text(captionText);

});

Jacob Mishkin
Jacob Mishkin
23,118 Points 
var $overlay = $(''); 
var $image = $(""); 
var $dialog = $(' close ')
//Para to caption overlay var $caption = $("") $overlay.append($image); 
//a caption to overlay 
$overlay.append($dialog) $overlay.append($caption) $("overlay").append($dialog);

$("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"); 
$image.attr("src", imageLocation);

$overlay.show(); 
var captionText = $(this).children("img").attr("alt"); 
$caption.text(captionText);

});

Zabe, I just formatted your code a little better, but next time can you review the cheat sheet on how to enter code into the forum questions please, it makes it a lot easier for people to review and help with your code. thanks,

if you want to add a button to the light box I would suggest you review the spoiler Jquery lessons. There they describe how to create a simple button.

1 Answer

zabe sangary
zabe sangary
2,657 Points

ah cool thanks for your feedback, I managed to fix the close button, I wasn't asking only a button but a close button for overlay.

Jacob Mishkin
Jacob Mishkin
23,118 Points

sounds good!