title: How to write a javascript function to load an explicit supersized slide
body: <p>how can I write a javascript function called showSlideTwo() that calls the supersized api and changes the slide?
  I tried </p>
  
  <pre>
      $("#supersized").api.goTo(2);</pre> 
  
  <p>or </p>
  
   <pre>$.supersized.api.goTo(2); 
  </pre>
  
  <p>and it gave me the following message in chrome: "Cannot call method 'goTo' of undefined"</p>
  
  <p>Thank you very much.</p>
  
  <p>This is what I tried in detail:</p>
  
  <pre><code>&lt;script src="http://localhost/js/supersized.3.2.4.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;&lt;!--
    jQuery(function($){
      $.supersized({
      // Background image
      slides  :  [
                  { image : 'http://farm2.static.flickr.com/1029/662880103_b3e1591d50_b.jpg' },
                  { image : 'http://farm7.static.flickr.com/6084/6080023793_b965ab5702_b.jpg'     },
                 ],
    transition : 1,
    vertical_center : 0,
    autoplay: 0,
    slideshow: 0
    });
  });          
  // --&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;&lt;!--
    function showSlideTwo(){
      $("#supersized").api.goTo(2); 
  //  or 
  // $.supersized.api.goTo(2); 
  
    }
  // --&gt; &lt;/script&gt;
  </code></pre>
  
  <p>This is a complete html page, defining two slides. Clicking on the link should change to slide 2 (I even tried nextSlide()) and it does not work. The api seems to be available because the title can be read and is correctly shown with the alert.</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/supersized.3.2.4.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
    jQuery(function($){
      $.supersized({
      // Background image
      slides  :  [
                  { image : 'http://farm2.static.flickr.com/1029/662880103_b3e1591d50_b.jpg', title : 'title image A'  },
                  { image : 'http://farm7.static.flickr.com/6084/6080023793_b965ab5702_b.jpg', title : 'title image B' },
                 ],
    transition : 1,
    vertical_center : 1,
    autoplay: 0,
    slideshow: 0
    });
  
    }); 
  &lt;/script&gt;
          &lt;style type="text/css"&gt; 
      #supersized { position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
      #supersized img{ width:auto; height:auto; position:relative; outline:none; border:none; }    
      #supersized a { z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; display:block; }
      #supersized a.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:100%; }
      #text_content, #text_content a {color: fff}
          &lt;/style&gt; 
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="text_content"&gt;
  Testpage:&lt;br/&gt;
  &lt;a href="#" id="testbutton" &gt;click to show slide two&lt;/a&gt;
  &lt;/div&gt;
  &lt;script&gt;
  $(document).ready(function(){
  
  $("#testbutton").click(function(){
      var slideTitle = api.getField('title');
      alert(slideTitle); // correctly shows 'title image A', so the api call works
      api.goTo(2); // This does not switch the image as expected
      // api.nextSlide(); // -&gt; does not do anyhting
  
  });
  });
  
  &lt;/script&gt;    
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>