Lightbox I'm currently using on my website.

old-lightbox.js

/*
* Title: Lightboxer
*
* AUTHOR:
*	Calum Gilchrist - http://CalumGilchrist.com
*
* Description: Creates a simple, light Lightbox for viewing and looking through images, built for Gallerium Image Viewer.
* 
* TODO:
*   - Make the actual lightboix easier to read, in the code
* 	- Make the animations a lot smoother
*	- Add a close button
*	- Add an image for the next and previous buttons (could generate with CSS)
*	- Pre-load the next image
*	- Split the gallery into pages of, say, 20, to reduce load times
*	- Center the thumbnails a bit better
*
* BUGS:
*	-If the lightbox is closed while not fully loaded, the lightbox will re-appear and won't be able to be closed. 
*	Timing Issue, most likely	
*  - Cover messes up when the page height is too small. Need to stretch pages 
*/

//public var
var $curChild;

//Gets the total number of images in the gallery
var $totnumimg = $('.gallery').children().length;

$('.gallery li').click(function(){
	$curChild = $(this);
	generateGallery($curChild);
}); 

/**
 * Creates the lightbox and all the elements that make it up
 * Could maybe be split into more functions, but works fine as is
**/
function generateGallery($theChild) {
	
	var $viewSize = "500h";

	// Get name of the image from title of div
	var $title = $theChild.children("img:first").attr('src');	
	

	//Get the larger image from the thumbnails name
	var $titleparts = $title.split("/");
	var $filename = $titleparts[$titleparts.length-1];
	$titleparts[$titleparts.length-2] = $viewSize; 
	$titleparts[$titleparts.length-1] = $filename.replace(/150s/, $viewSize);
	var $src = $titleparts.join("/");

	//Get the number of the current image, in the list
	var $numofimg = $theChild.prevAll().length + 1;

	//Get the initial center position for the lightbox
	var $xpos = ($(window).width() - $('#lightbox').width())/2;

	//Get the position of the scrollbar
	var $windowPos = $(window).scrollTop() + 50;

	$('#lightbox').css({'left':$xpos,'top':$windowPos});
	
	//Get the height of the window, for the cover
	var $docHeight = $(document).height();
	$('#cover').css({
		'height':$docHeight,
	});

	//Make the image invisible when the lightbox loads	
	$('#lightbox img').hide();
	
	//Load the new image
	var $img = new Image();
	$($img).load($title).attr({
		src: $src,
		alt: '',
		class: 'lb-img',
		style: "display:none;"
    });
	
	//Show the Lightbox and background cover	
	$('#lightbox').fadeIn('400');
	$('#cover').fadeIn('100');
		
	//generate the next and previous buttons



	//Initiates once the image has fully loaded, loads the image
	$($img).load(function(){	
		//function to calculate the central position for the lightbox			
		var $xpos = ($(window).width() - $img.width)/2;
		
		$('#lightbox').append('<div class="gallery-nav" id="gallery-prev">\
                <div><span></span></div>\
            </div>\
            <div class="gallery-nav" id="gallery-next">\
                <div><span></span></div>\
            </div>\
        ');
		$('.gallery-nav').css('height',$img.height);

		$('#lightbox').animate({
			'left':$xpos,
			'width':$img.width,
			'height':($img.height)},'500');
		$('#lightbox').append($img);
		$('#lightbox img').fadeIn(1000);		
		$('#lightbox').append('<p>Image ' +$numofimg +' of ' + $totnumimg+ '</p>');
        //Append the close button
		$('#lightbox').append('<span id="lb-close"><p>Close</p><span></span>');

	});
};

/**
 * Removes the old Lightbox from view
**/
function removeLB() {		
	removeLBContents();
	$('#lightbox').fadeOut(800,"linear");
	$('#cover').fadeOut(700);
	$('.lb-img').fadeOut('slow');
};

function removeLBContents() {
	$('#lightbox img').fadeOut(300).remove();
	$('#lightbox #lb-close').fadeOut(100).remove();
	$('#lightbox p').fadeOut(400).detach();
	$('#lightbox div').fadeOut('fast').detach();
}

//Destroy the lightbox when it, or the background is clicked
$('#cover').live('click',removeLB);

//Set the cover to click, to destroy everything when close is clicked
$('#lb-close').live('click',function() {
		$('#cover').click();
});

/**
 * Making these two objects in a nav object would be an idea 
 * Show image/text on hover
**/

$('#gallery-prev').live('click',function() {
	$prevDiv = $curChild.prev();
	
	if ($prevDiv.length!=0){
		removeLBContents();
		$curChild=$prevDiv;
		generateGallery($curChild);	
	} else {
		removeLB();
	}
});

$('#gallery-next').live('click',function() {
	$nextDiv=$curChild.next();

	if ($nextDiv.length!=0){
		removeLBContents();
		$curChild = $nextDiv;
		generateGallery($curChild);	
	} else {
		removeLB();
	}
});


/**
  * When hovering on the next and previous, show an arrow
**/
$('#gallery-next').live({mouseenter: function() {
        $('#gallery-next div').animate({width:'100%'},200);
}, mouseleave: function(){
        $('#gallery-next div').animate({width:'0%'},300);
}});

$('#gallery-prev').live({mouseenter: function() {
        $('#gallery-prev div').animate({width:'100%'},200);
}, mouseleave: function(){
        $('#gallery-prev div').animate({width:'0%'},300);
}});
    

/*
*  Function to change the mouse to a hand on hover, trivial but necessary
*  Could do this is the html by making the links anchors that go to the 
*  lightbox, but JQuery seems just as easy. Although, anchors may be 
*  better./

$('.gallery img').mouseenter(function() {
	$(this).css('cursor: pointer');
}
*/