I'm trying to make a website where the background is somewhat of a slideshow of photos that the user can scroll through using navigation buttons.
I want the photos to take up the window one at a time and to fill the window no matter which way the window is resized.
The script I have works perfectly on the first photo in the div but not on any others and I have no idea why.
HTML:
Code:
<div id="cont_photo" class="cont_photo" style="z-index:1;">
<img src="../Photos/peru017.jpg" id="1"/>
<img src="../Photos/peru026.jpg" id="2"/> 
<img src="../Photos/newyork" id="3"/> 
</div>
Javascript:
Code:
/*
			the images preload plugin
			*/
			(function($) {
				$.fn.preload = function(options) {
					var opts 	= $.extend({}, $.fn.preload.defaults, options);
					o			= $.meta ? $.extend({}, opts, this.data()) : opts;
					var c		= this.length,
						l		= 0;
					return this.each(function() {
						var $i	= $(this);
						$('<img/>').load(function(i){
							++l;
							if(l == c) o.onComplete();
						}).attr('src',$i.attr('src'));	
					});
				};
				$.fn.preload.defaults = {
					onComplete	: function(){return false;}
				};
			})(jQuery);
			

			$(function() {
				var $cont_photo				= $('#cont_photo'),
					$cont_photo_images		= $cont_photo.find('img'),
					$cont_photo_img			= $cont_photo_images.eq(0),
					$tf_thumbs			= $('#tf_thumbs'),
					total				= $cont_photo_images.length,
					current				= 0,
					$nodata				= $('#nodata'),
					$nodata			= $('#nodata'),
					$nodata			= $('#nodata'),
					$loading			= $('#loading');
				
				//preload the images				
				$cont_photo_images.preload({
					onComplete	: function(){
						$loading.hide();
						init();
					}
				});
				
				//shows the first image and initializes events
				function init(){
					//get dimentions for the image, based on the windows size
					var dim	= getImageDim($cont_photo_img);
					//set the returned values and show the image
					$cont_photo_img.css({
						width	: dim.width,
						height	: dim.height,
						left	: dim.left,
						top		: dim.top
					}).fadeIn();
				
					//resizing the window resizes the $cont_photo_img
				$(window).bind('resize',function(){
					var dim	= getImageDim($cont_photo_img);
					$cont_photo_img.css({
						width	: dim.width,
						height	: dim.height,
						left	: dim.left,
						top		: dim.top
					});
				});
		
			
				}
	
				//get dimentions of the image, 
				//in order to make it full size and centered
				function getImageDim($img){
					var w_w	= $(window).width(),
						w_h	= $(window).height(),
						r_w	= w_h / w_w,
						i_w	= $img.width(),
						i_h	= $img.height(),
						r_i	= i_h / i_w,
						new_w,new_h,
						new_left,new_top;
					
					if(r_w > r_i){
						new_h	= w_h;
						new_w	= w_h / r_i;
					}
					else{
						new_h	= w_w * r_i;
						new_w	= w_w;
					}


					return {
						width	: new_w + 'px',
						height	: new_h + 'px',
						left	: (w_w - new_w) / 2 + 'px',
						top		: (w_h - new_h) / 2 + 'px'
					};
					}
			});