$(document).ready(function(){
	$(".items a").click(function(){
		var $largeImg				=	$("#largeImg");
		var largeImgId			= $largeImg.attr("id");
		var imgHeight				= $largeImg.height(); // Get the height, so our wrapper wouldn't collapse
		var largePath 			= $(this).attr("href");
		var largeAlt 				= $(this).attr("title");
		if ($largeImg.attr("src") != largePath) { // Check if it isn't the same picture
			$largeImg.wrap('<div style="position: relative; height: ' + imgHeight + 'px"></div>'); // Wrap current picture
			$largeImg.css({ 'position': 'absolute', 'z-index': '100' }); // Position image so we can load the next one behind it
			$largeImg.parent().prepend('<img id="largeImgTemp" src="' + largePath + '" alt="' + largeAlt + '" style="position: absolute; display: none;" />'); // Load the next image
			$largeImg.fadeOut(250, function(){ // Fadeout
				$(this).remove(); // After fadeout, remove old picture
				$largeImg 	= $("#largeImgTemp"); // It's safe to replace our variable back the old one now
				$largeImg.removeAttr("id").attr("id", largeImgId).fadeIn(250).removeAttr("style"); // And fade in the next one
				$largeImg.parent().replaceWith($("#largeImg")); // Remove wrapper
			});
		}
		return false;
	});
});