Photostack/Photo Gallery Centering on Screen

[AndrewFerrara]

Need to have the javascript photo gallery on this page http://www.halogamertags.com/dachs/ center on the screen.

 

For example if you scroll down to where the second puppy is at the top of your browser and click on the thumbnail the gallery is at the top of the web page.

 

Thanks,

Andrew

 

Javascript:

<!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript">
            $(function() {

			var $ps_albums 		= $('#ps_albums');	
			var $ps_container 	= $('#ps_container');
			var $ps_overlay 	= $('#ps_overlay');
			var $ps_close		= $('#ps_close');
			/**
			* when we click on an album,
			* we load with AJAX the list of pictures for that album.
			* we randomly rotate them except the last one, which is
			* the one the User sees first. We also resize and center each image.
			*/
			$ps_albums.children('div').bind('click',function(){
				var $elem = $(this);
				var album_name 	= 'album' + parseInt($elem.index() + 1);
				var $loading 	= $('<div />',{className:'loading'});
				$elem.append($loading);
				$ps_container.find('img').remove();
				$.get('photostack.php', {album_name:album_name} , function(data) {
					var items_count	= data.length;
					for(var i = 0; i < items_count; ++i){
						var item_source = data[i];
						var cnt 		= 0;
						$('<img />').load(function(){
							var $image = $(this);
							++cnt;
							resizeCenterImage($image);
							$ps_container.append($image);
							var r		= Math.floor(Math.random()*41)-20;
							if(cnt < items_count){
								$image.css({
									'-moz-transform'	:'rotate('+r+'deg)',
									'-webkit-transform'	:'rotate('+r+'deg)',
									'transform'			:'rotate('+r+'deg)'
								});
							}
							if(cnt == items_count){
								$loading.remove();
								$ps_container.show();
								$ps_close.show();
								$ps_overlay.show();
							}
						}).attr('src',item_source);
					}
				},'json');
			});

			/**
			* when hovering each one of the images, 
			* we show the button to navigate through them
			*/
			$ps_container.live('mouseenter',function(){
				$('#ps_next_photo').show();
			}).live('mouseleave',function(){
				$('#ps_next_photo').hide();
			});

			/**
			* navigate through the images: 
			* the last one (the visible one) becomes the first one.
			* we also rotate 0 degrees the new visible picture 
			*/
			$('#ps_next_photo').bind('click',function(){
				var $current 	= $ps_container.find('img:last');
				var r			= Math.floor(Math.random()*41)-20;

				var currentPositions = {
					marginLeft	: $current.css('margin-left'),
					marginTop	: $current.css('margin-top')
				}
				var $new_current = $current.prev();

				$current.animate({
					'marginLeft':'250px',
					'marginTop':'-385px'
				},250,function(){
					$(this).insertBefore($ps_container.find('img:first'))
						   .css({
								'-moz-transform'	:'rotate('+r+'deg)',
								'-webkit-transform'	:'rotate('+r+'deg)',
								'transform'			:'rotate('+r+'deg)'
							})
						   .animate({
								'marginLeft':currentPositions.marginLeft,
								'marginTop'	:currentPositions.marginTop
								},250,function(){
									$new_current.css({
										'-moz-transform'	:'rotate(0deg)',
										'-webkit-transform'	:'rotate(0deg)',
										'transform'			:'rotate(0deg)'
									});
						   });
				});
			});

			/**
			* close the images view, and go back to albums
			*/
			$('#ps_close').bind('click',function(){
				$ps_container.hide();
				$ps_close.hide();
				$ps_overlay.fadeOut(400);
			});

			/**
			* resize and center the images
			*/
			function resizeCenterImage($image){
				var theImage 	= new Image();
				theImage.src 	= $image.attr("src");
				var imgwidth 	= theImage.width;
				var imgheight 	= theImage.height;

				var containerwidth  = 460;
				var containerheight = 330;

				if(imgwidth	> containerwidth){
					var newwidth = containerwidth;
					var ratio = imgwidth / containerwidth;
					var newheight = imgheight / ratio;
					if(newheight > containerheight){
						var newnewheight = containerheight;
						var newratio = newheight/containerheight;
						var newnewwidth =newwidth/newratio;
						theImage.width = newnewwidth;
						theImage.height= newnewheight;
					}
					else{
						theImage.width = newwidth;
						theImage.height= newheight;
					}
				}
				else if(imgheight > containerheight){
					var newheight = containerheight;
					var ratio = imgheight / containerheight;
					var newwidth = imgwidth / ratio;
					if(newwidth > containerwidth){
						var newnewwidth = containerwidth;
						var newratio = newwidth/containerwidth;
						var newnewheight =newheight/newratio;
						theImage.height = newnewheight;
						theImage.width= newnewwidth;
					}
					else{
						theImage.width = newwidth;
						theImage.height= newheight;
					}
				}
				$image.css({
					'width'			:theImage.width,
					'height'		:theImage.height,
					'margin-top'	:-(theImage.height/2)-10+'px',
					'margin-left'	:-(theImage.width/2)-10+'px'	
				});
			}
            });
        </script>