Hello, I am very new to javascript and have been using w3schools.com to learn how to program using it. I am using an image map on a filmstrip image to call a lightbox slideshow. I'm trying to right script so that when you click on a certain part of the image map, it will open the lightbox and will start the slideshow at the relevant image. Any explanations or tutorials pointing me in the right direction would be very helpful, as I want to understand this! Thank you!

Here is where I have the trial page posted (If you click on the number 1 image in the filmstrip, that's where I have been able to link the slideshow so far): www.theriveroverlook.com/trial.html

Here is the relevant HTML code:
Code:
  <div id="content_1" class="content">
			<img src="file1bottom.png" width="982" height="674" alt="Photos of Holston Room" usemap="#filmstripmap1">
            <map name="filmstripmap1" >
            	 <area id="1" shape="poly" coords="732,91,884,97,877,198,718,187" class="open_lightbox" href="#" alt="Photo_1">
               <area id="2" shape="poly" coords="724,205,874,214,868,312,717,301" class="open_lightbox" href="#" alt="Photo_2">
               <area id="3" shape="poly" coords="717,324,872,332,862,432,713,420" class="open_lightbox" href="#" alt="Photo_3">
               <area id="4" shape="poly" coords="711,440,865,447,857,547,709,537" class="open_lightbox" href="#" alt="Photo_4">
               <area id="5" shape="poly" coords="470,150,617,130,628,231,483,245" class="open_lightbox" href="#" alt="Photo_5">
               <area id="6" shape="poly" coords="481,260,630,247,641,347,491,361" class="open_lightbox" href="#" alt="Photo_6">
               <area id="7" shape="poly" coords="492,380,644,363,654,460,504,477" class="open_lightbox" href="#" alt="Photo_7">
               </map>
<div class="lightbox-panel">

<img id="photo1" src="HolstonImages/00.jpg" class="ntt_media_file" alt="Room Photo 1"/>
<img id="photo2" src="HolstonImages/01.jpg" style="display:none;" class="ntt_media_file" alt="Room Photo 2"/>
<img id="photo3" src="HolstonImages/02.jpg" style="display:none;" class="ntt_media_file" alt="Room Photo 3"/>
<img id="photo4" src="HolstonImages/03.jpg" style="display:none;" class="ntt_media_file" alt="Room Photo 4"/>
<img id="photo5" src="HolstonImages/04.jpg" style="display:none;" class="ntt_media_file" alt="Room Photo 5"/>
<img id="photo6" src="HolstonImages/05.jpg" style="display:none;" class="ntt_media_file" alt="Room Photo 6"/>
<img id="photo7" src="HolstonImages/06.jpg" style="display:none;" class="ntt_media_file" alt="Room Photo 7"/>

<iframe width="750" height="500" style="display:none;"
class="ntt_media_file" frameborder="0" allowfullscreen></iframe>

<div class="ntt_prev_button">
<img src="fc_left_arrow.png" id="ntt_prev_media" alt="Get Previous Media Item"/>
</div>

<div class="ntt_next_button">
<img src="fc_right_arrow.png" id="ntt_next_media" alt="Get Next Media Item"/>
</div>

<div class="ntt_close_button">
<img src="ntt_close_button.png" id="close-panel" alt="Close Lightbox"/>
</div>

</div>

<div id="lightbox_background"></div>
      
      </div>

Here is the relevant code for the javascript lightbox:
Code:
$(document).ready(function(){

	
	
	
	// When a link of class open_lightbox is clicked this function is triggered 
 	$("#1.open_lightbox").click(function(){
 	
 	// Sets the opacity for the background shadow to 85%
 	$("#lightbox_background").css({opacity: 0.75}); 
 	
 	// Makes all of the hidden parts of the lightbox appear
 	$("#lightbox_background, .lightbox-panel, .ntt_close_button, .ntt_next_button, .ntt_prev_button").fadeIn(300);
 	
 	// Gets the height and width of the first media type displayed
 	// Media type is a reference to any images or movies
	
 	ntt_img_height = $('.ntt_media_file:first').css('height');
 	ntt_img_width = $('.ntt_media_file:first').css('width');
 	
 	// Changes the size of the parent div that surrounds the media on screen
 	// Animate will make the changes slowly for dramtic effect
 	$('.ntt_media_file:first').parent().animate({
 	height: ntt_img_height+100,
 	width: ntt_img_width
 	}, "slow");
 	
 	});
	
	
	
	$("#2.open_lightbox").click(function(){
		
	$("#lightbox_background").css({opacity: 0.75});
	$("#lightbox_background, .lightbox-panel .ntt_close_button, .ntt_next_button, .ntt_prev_button").fadeIn(300);
	
	
	ntt_img_height = $('.ntt_media_file:first').css('height');
 	ntt_img_width = $('.ntt_media_file:first').css('width');
 	
 	// Changes the size of the parent div that surrounds the media on screen
 	// Animate will make the changes slowly for dramtic effect
 	$('.ntt_media_file:first').parent().animate({
 	height: ntt_img_height+100,
 	width: ntt_img_width
 	}, "slow");
	
	});
	

	
	
 	// If an img is clicked on with the id of close-panel run this function
 	$("img#close-panel").click(function(){
 	
 	// Make all the lightbox elements disappear
 	$("#lightbox_background, .lightbox-panel, .ntt_close_button, .ntt_next_button, .ntt_prev_button").fadeOut(300);
 	})
 	
 	// When the next button is clicked it triggers a click event on 
 	// the current image visible on the screen
 	$("img#ntt_next_media").click(function(){
 		$(".ntt_media_file:visible").trigger('click');
 	});
 	
 	// Closes the lightbox if the escape key is pressed
 	$(document).keypress(function(e) {
 		// If the key pressed was escape close the lightbox
 		if(e.keyCode == 27)
 		{
 			$("#lightbox_background, .lightbox-panel").fadeOut(300);
 		}
 	
 	});
 	
 	// This event is triggered any time the user clicks on anything with a
 	// class of ntt_media_file.
 	// It cycles through the different media types from first to last
		   
	
	
	
	
	
	$(".ntt_media_file").click(function(){
 	
 		if( $(this).next('.ntt_media_file').length == 0)
 		{
 			// Make all visible media disappear in the lightbox
 			$(".ntt_media_file:visible").toggle();
 			
 			// Display the first media in the lightbox
 			$(".ntt_media_file:first").toggle();
 			
 			// Call this to resize the div that surrounds the media
 			// based on the size of the media displayed
 			ntt_resize_div_container();
 			
 		
 		} else { 
 		
 			// Make all visible media disappear in the lightbox
 			$(".ntt_media_file:visible").toggle();
 			
 			// this is a reference to the element that was clicked to trigger
 			// this function. This statement is causing the next media 
 			// with the class ntt_media_file to appear
 			$(this).next('.ntt_media_file').toggle();
 			
 			// Call this to resize the div that surrounds the media
 			// based on the size of the media displayed
 			ntt_resize_div_container();		
 		
 		}
 	
 	});
 	
 	// This event is triggered any time the user clicks on the previous
 	// button.
 	// It cycles backwards through the different media types
 	$(".ntt_prev_button").click(function(){
 	
 		// This checks to see if a media file is available to display
 		if( $(".ntt_media_file:visible").prev('.ntt_media_file').length == 0)
 		{
 			// Make all visible media disappear in the lightbox
 			$(".ntt_media_file:visible").toggle();
 			
 			// Display the first media in the lightbox
 			$(".ntt_media_file:last").toggle();
 			
 			// Call this to resize the div that surrounds the media
 			// based on the size of the media displayed
 			ntt_resize_div_container();
 		
 		} else { 
 		
 			// Get the current index value for the media shown
 			var ntt_current_media_shown = $(".ntt_media_file:visible").index();
 			
 			// Get the index for the media that proceeds the current image
 			var ntt_prev_item_to_show = ntt_current_media_shown - 1;
 			
 			// Toggle off all visible media in the lightbox
 			$(".ntt_media_file:visible").toggle();
 			
 			// Toggle on the media previous to the last shown
 			$(".ntt_media_file").eq(ntt_prev_item_to_show).toggle();
 			
 			// Call this function to resize the div based on dimensions 
 			// of the media shown in the lightbox
 			ntt_resize_div_container();			
 		
 		}
 	
 	});
 	
 	});
 	
 	// Call this function to resize the div based on dimensions 
 	// of the media shown in the lightbox
 	function ntt_resize_div_container()
 	{
 		// Get the current height and width of the visible media in lightbox
 		ntt_img_height = $(".ntt_media_file:visible").css('height');
		ntt_img_width = $(".ntt_media_file:visible").css('width');
		
		// Define the margins based on the size of the image
		ntt_img_margin_top = (ntt_img_height / 4);
		ntt_img_margin_left = (ntt_img_width / 4);
 			
 		// Target the div that surrounds the visible media (it's a div)
 		// Adjust the size of the parent div based on the dimensions
 		// of the media it contains
 		$(".ntt_media_file:visible").parent().animate({
 			height: ntt_img_height+100,
 			width: ntt_img_width
 			}, "fast");

 		
 		$(".ntt_media_file:visible").parent().css({
			'position': 'fixed',
			'top': '22%',
			'left': '22%',
			'min-width': '775px',
			'margin-top': ntt_img_margin_top,
			'margin-left': ntt_img_margin_left
			});
 		
 	}
The Red part is where I'm trying to call for the 2nd image, but can't figure out what I'm doing! Again, any explanations for JS would be very appreciated!

Jaime