Lightbox not so light in the UX

[w00zygrrl]

Hello. I am the PM on a project that needs to launch yesterday. The dev handed the site to me today and the lightbox is jacked. I am looking for a clean, auto-resizing, nice lightbox for the images on the site, however, I am not getting that and the dev seems to be stuck ... so here I am.

The dev is using the following JS: http://lokeshdhakar.com/projects/lightbox2/

The issues I found straightaway are:

Image on click bounce off the left side of the page then MIGHT center.
The lightbox does not auto-resize.

There are design issues but I am hopeful the dev can work those out.

Can anyone help? Thanks in advance!

Site in question (sub-pages): http://gantzerwater.com/test/

[w00zygrrl]

$(document).ready(function() {
	less.env = "development";less.watch();
	$("select").change(function() {
		window.location.href = $("option:selected").val();
	});
	$(".subimg").click(function() {
		var href = $(this).attr("href");
		$("body").prepend("<div id=\"backdrop\"></div><div id=\"lightbox\"><div id=\"close\">x</div><img src=\""+href+"\"></div>");
		$("#backdrop").css("height",$(document).height());
		var fixed = 0,
			fix = setTimeout(function() {
				if ($("#lightbox").height() >= $(window).height())
					$("#lightbox img").css("height",($(window).height() - ($(window).height()/16)));
				if (fixed == 2) clearInterval(fix);
				if ($("#lightbox").width() >= ($(window).width() - 100))
					$("#lightbox img").css("width",($(window).width() - ($(window).width()/16)));
				$("#lightbox").css({
					"top" : ($(window).height()/2),
					"marginTop" : ($("#lightbox").height()/2) * -1,
					"marginLeft" : ($(window).width() - $("#lightbox").width()) / 2,
					"marginRight" : ($(window).width() - $("#lightbox").width()) / 2
				});
				$("body").css("overflow","hidden");
				fixed++;
			},200);
	});
	$(".img-anchor").click(function() {
		var href = $(this).attr("href");
		$("body").prepend("<div id=\"backdrop\"></div><div id=\"lightbox\"><div id=\"close\">x</div><img src=\""+href+"\"></div>");
		$("#backdrop").css("height",$(document).height());
		var fixed = 0,
			fix = setTimeout(function() {
				if (fixed == 2) clearInterval(fix);
				if ($("#lightbox").height() >= $(window).height())
					$("#lightbox img").css("height",($(window).height() - ($(window).height()/16)));
				if ($("#lightbox").width() >= ($(window).width() - 100))
					$("#lightbox img").css("width",($(window).width() - ($(window).width()/16)));
				$("#lightbox").css({
					"top" : ($(window).height()/2),
					"marginTop" : ($("#lightbox").height()/2) * -1,
					"marginLeft" : ($(window).width() - $("#lightbox").width()) / 2,
					"marginRight" : ($(window).width() - $("#lightbox").width()) / 2
				});
				$("body").css("overflow","hidden");
				fixed++;
			},200);
	});
	$(document).on("click","#close",function() {
		$("#backdrop, #lightbox").remove();
		$("body").css("overflow","auto");
	});
});