Hello everyone, let me first say that js is not my area of expertise, so bare with me. I have a site that was originally developed by someone who is no longer reachable. I have all of the files and am developing locally.

The original idea was to have a thumbnail gallery that "zoomed in" once each thumbnail was clicked. However, I want to do away with the thumbnails (image 1) and just use the large image gallery (image 2.) I like the overall functionality of this gallery, and would love to keep using it, without the thumbnails.

Image 1:
http://cooltablemedia.com/clients/sbpc/thumbnails.png

Image 2:
http://cooltablemedia.com/clients/sbpc/large.png

HTML CODE:
http://cooltablemedia.com/clients/sbpc/htmlcode

Below is the javascript code that I currently have. Thanks in advance, any help is greatly appreciated!


Code:
$(function () {

        var fadeSpeed = 220;
	var total = $(".tn a").length;
  	
  	$('#prev').hover(function () {
   		$("#prev_image").animate({ opacity: 1.0 }, fadeSpeed);
  	},function () {
    	$("#prev_image").animate({ opacity: 0.01 }, fadeSpeed);
  	});
  	
  	$('#next').hover(function () {
   		$("#next_image").animate({ opacity: 1.0 }, fadeSpeed);
  	},function () {
    	$("#next_image").animate({ opacity: 0.01 }, fadeSpeed);
  	});
  	


	$('.tn a').click(function(e){
		
		e.preventDefault();
		
  		if($(this).hasClass('selected')) { return false; }
  		
		$('.tn a.selected').removeClass('selected');
		$(this).addClass('selected');
		
		var cnt =  $(this).next().val()
		var imageId = "#photo" + cnt;
		
		updateLocation(cnt);
		//update counter
		
		$("#tn_counter").html(cnt);
		
		var selected_image = $(imageId);
		
		$('.holder').remove(imageId);
		var $holder_selected = $('.holder img.selected');
		$(selected_image).insertBefore($holder_selected);
		$(selected_image).fadeTo(0,1.0);
		$(selected_image).show();
		$holder_selected.removeClass('selected');
		$(selected_image).addClass("selected");
		
		if( $('.tn').is(':visible') ) {
			var fadeDelay  = 0.1;
		} else {
			var fadeDelay = 300;
		}
		$holder_selected.fadeTo(fadeDelay,0,function(){
			//	$("#fadeContainer").children().last().remove();
			$holder_selected.hide();
			});
			
		//$("#fadeContainer").children().last().remove();
			
			
		//set description
		var imageDescription = $(this).next().next().val();
		$("#photo_info_btn").html("" + imageDescription + "");
		
		if( $('.tn').is(':visible') ) {
			$(".tn").fadeOut("fast");
		}
		
		
		return false;
		
	});
  	
  	
  	$('#next').click(function(){
	  	//next click
  		var selected_index = $('.tn a.selected').next().val();
  		selected_index++;
  		if(selected_index > total) { selected_index = 1; }
  		var tnId = "#photo_tn" + selected_index;
		$(tnId).click();
  	});
  	
  	
  	$('#prev').click(function(){
	  	//prev click
  	  	var selected_index = $('.tn a.selected').next().val();
  		selected_index--;
  		if(selected_index <= 0) { selected_index = total; }
  		var tnId = "#photo_tn" + selected_index;
		$(tnId).click();
  	});
  	
  	$("#photo_info_prev").click(function(e){
		e.preventDefault();
		$('#prev').click();
	});
	
	$("#photo_info_next").click(function(e){
		e.preventDefault();
		$('#next').click();
	});
  
 	//--Select first image
//	$("#photo1").addClass("selected");
//	$("#.tn a").first().addClass("selected");
	
	//--Initialize states
	$('#prev_image').animate({ opacity: 0.01 }, 1);
	$('#next_image').animate({ opacity: 0.01 }, 1);
	
	$('.holder img').not('img.selected').hide();
  	
	
	var hash =  gethash();
	if(hash) {
		if(hash <= total && hash > 0){
	  		var tnId = "#photo_tn" + hash;
			$(tnId).click();
		} else {
			alert("no");
		}
	}
	
});

function updateLocation(type){
	window.location = window.location.pathname + "#" + type;
}

function gethash(){
	var hash=window.location.hash;
	hash=hash.replace(/#/,'');
	//if(hash == settings.currenthash) return;
	return hash;
}