Need Help with Javascript

Question

I posted a little bit ago, but solved part of the problem I'm having with this javascript. I'm new to javascript and am trying my best to understand how to do it. I have a lightbox script that I'm trying to edit so that I can have a different image be the starting point of the images in the lightbox, depending on which is clicked. Currently, no matter how I change the script, I have the same starting image. I think that I don't understand the handlers completely that affect the total script. Any help understanding these would be helpful.
Here's the affected html:
    <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 javascript (highlighted where I'm trying to add script to change it to pull up which image I want:
$(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_media_file").is("#photo2")
           // 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
Here is the link the the uploaded script and html: www.theriveroverlook.com/Trial.html

Answer 1

Hi,
May be this can help:
<html>
<body>
<script language="javascript">
var num1=0;
var num2=0;
var num3=0;
function printGrade(){
var score=prompt("Enter your score","Enter your score");
if(score>81)
alert("Grade : A");
else if(score>61)
alert("Grade : B");
else if(score>41)
alert("Grade : C");
else
alert("Grade : D");
function input3Number(){
num1=prompt("Enter First Number","Enter First Number");
num2=prompt("Enter Second Number","Enter Second Number");
num3=prompt("Enter Third Number","Enter Third Number");
function returnMax(){
input3Number();
if(num1>num2){
if(num1>num3)
alert(num1);
else
alert(num3);
}else{
if(num2>num3)
alert(num2);
else
alert(num3);
function returnMin(){
input3Number();
if(num1<num2){
if(num1<num3)
alert(num1);
else
alert(num3);
}else{
if(num2<num3)
alert(num2);
else
alert(num3);
function daysInMonth(){
var monthNumber=prompt("Enter Month in Number","");
if(monthNumber==1 || monthNumber==3 || monthNumber==5 || monthNumber==7 || monthNumber==8 || monthNumber==10 || monthNumber==12)
alert("Days in Month is : 31");
else if(monthNumber==2)
alert("Days in Month is : 28/29 (Leap year)");
else
alert("Days in Month is : 30");
</script>
<input type="button" name="month1" value="Days in a Month" onclick="daysInMonth()">
<input type="button" name="B1" value="Calculate Grade" onclick="printGrade()">
<input type="button" name="max" value="Maximum number" onclick="returnMax()">
<input type="button" name="max" value="Minimum number" onclick="returnMin()">
</body>
</html>