I'm having a problem with my lightbox
I really can't see the problem with my code, but the image will not come up when I click on the thumbnail. Here is my current code. I was pretty much thrown into jQuery after a day of using it so I'm am not at all familiar with it. Any help would be greatly appreciated.
$(document).ready(function() {
set_up_lightbox();
});
/**
* set_up_lightbox()
*
* This function should create the <div> elements necessary for displaying
* our lightbox container and our lightbox overlay.
*/
function set_up_lightbox() {
/**
* 1.1: Add two divs to the body of the document:
* One for the overlay with ID 'lightbox_overlay'
* One for the container with ID 'lightbox_container'
*/
$("body").append($("<div/>").attr("id","lightbox_overlay"));
$("body").append($("<div/>").attr("id","lightbox_container"));
/**
* 1.2: Hide the two divs we just created, as we don't want them
* to display until the user clicks on an image.
*/
$("#lightbox_overlay").hide();
$("#lightbox_container").hide();
/**
* 1.3: This is the part where we add our thumbnails. For this example
* we want to add one image with src="flowers_thumb.jpg" (our
* thumbnail) and add a click method that calls
* load_image("flowers.jpg") for the full picture. This img
* should be appended to the div with id "gallery" so that our users
* can see it.
*/
$("#gallery").append( $("<img/>").attr("src", "flowers_thumb.jpg"));
$("#gallery").click( function() {load_image("flowers.jpg"); });
}
/**
* load_image(url)
*
* This function should fade in the lightbox container and lightbox overlay,
* displaying only picture given in the 'url' parameter inside the container
* followed by a 'Close' link for closing the lightbox.
*
* The funny syntax of this declaraction is necessary for functions that take
* parameters.
*/
var load_image = function(url) {
/**
* 2.1: Remove anything that might be in the container already.
*/
$("#lightbox_container").empty();
/**
* 2.2: Tell the overlay to begin to fade in.
*/
$("lightbox_overlay").fadeIn("slow");
/**
* 2.3: Append the image to the container.
*/
$("#lightbox_container").append( $("<img/>").attr("src", "flowers.jpg"));
/**
* 2.4: Create a clickable "Close" that will call close_image.
*/
$("lightbox_container").click(function() { close_image(); });
/**
* 2.5: Tell the container to fade in.
*/
$("lightbox_container").fadeIn("slow");
}
/**
* close_image()
*
* This function should simply dismiss the overlay and container, fading
* back to the original document.
*/
function close_image() {
/**
* 3.1: Tell the container to fade out.
*/
$("#lightbox_container").hide();
/**
* 3.2: Tell the overlay to fade out.
*/
$("#lightbox_overlay").hide();
}