Help

This is not perfect, my code dont work.

// Problem: User when clicking on image goes to adead end //Solution: Create an overlay with the large image - lightbox

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

var $caption = $("<p></p>");

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

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

//2. add overlay $("body").append($overlay);

//Capture the click event on a link to an image $("#imageGallery a").click(function(event){ event.preventDefault(); var href = $(this).attr("href");

//1.2 Update overlay witht the image linked in the link $image.attr("src",href); }); //1,1 show the overlay. $overlay.show();

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

//3. When overlay is clicked $overlay.click(function(){

//3.1 Hide the overlay $overlay.hide(); });

console.log(href);