title: External javascript not working but works in head
body: <p>I'm new to this but I'm having trouble getting my external js to work (however it works in the head of HTML doc), I've looked at all solutions on here already.</p>
  
  <p>This is my HTML, the js src is script2.js</p>
  
  <pre><code>&lt;!DOCTYPE html &gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;link href="css/stylesheetelaine.css" rel="stylesheet" type="text/css"/&gt; 
  
  
  &lt;script type="text/javascript" src="js/script2.js"&gt; &lt;/script&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="js/jQuery/jquery.monte.js"&gt;&lt;/script&gt;     
  
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Gallery&lt;/title&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="wrapper"&gt;
  
  &lt;div id="title"&gt;
  
  &lt;h1&gt;&lt;a href="index.html"&gt;&lt;img src="img/elaine4.png"  width="517" height="185"    alt="elaine cullinan"&gt;&lt;/a&gt;&lt;img src="img/elainefilligree.png" width="235" height="251" alt="elaine"&gt;&lt;/h1&gt;
  
  
  &lt;div id="nav"&gt;
  &lt;ul id&gt;
  
  &lt;li&gt;&lt;a href="about.html" title="About"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="tattoo.html" title="Tattoo"&gt;Tattoo&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="makeup.html" title="Make Up"&gt;Make Up&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="gallery.html" title="Gallery"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="contact.html" title="Contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="gallerywrap"&gt;
  
      &lt;div id='example1' class='container'&gt;
          &lt;img src="img/slide/img1.png" alt='An eastern mud turtle hatching.'/&gt;
          &lt;img src="img/slide/img1.png" alt='Just hatched.'/&gt;
          &lt;img src="img/slide/img1.png" alt='After three months.'/&gt;
          &lt;img src="img/slide/img1.png" alt='Taking an occassional bask.'/&gt;
          &lt;img src="img/slide/img1.png" alt='Ornery but healthy at two and a half years.'/&gt;
      &lt;/div&gt;
  
  
  
  
  &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>My external js:</strong></p>
  
  <pre><code>        $(function () {
              // Unstyled Example
              $.monte('#example1');
  
  
              // Styled Buttons Example
              // (see the CSS in the above style block)
              $.monte('#example2', {auto:false});
  
  
              // Callback Example
              // Format and append the HTML:
              $('#example3 &gt; img').each(function(){
                  $(this)
                  .wrap('&lt;div style="position:relative"/&gt;')
                  .parent()
                  .append('&lt;div&gt;&lt;p&gt;' + $(this).attr('alt') + '&lt;/p&gt;&lt;/div&gt;')
                  .append('&lt;img src="frame.png" alt="" class="frame"/&gt;');
              });
              // Hide the text on all but the center slide:
              $('#example3 div div').css({opacity: 0}).eq(0).css({opacity: 0.8});
              // Using the callbacks to reveal and hide the text:
              $.monte('#example3', {
                  auto:false,
                  callbackIn: function () {
                      $(this[0]).find('div').animate({opacity: 0.8}, 450);
                  }, 
                  callbackAway: function () {
                      $(this[0]).find('div').animate({opacity: 0}, 450);
                  }
              });
          });
  </code></pre>