title: Supersized Goto API onClick
body: <p>I've been <a href="https://stackoverflow.com/questions/7197577/how-to-write-a-javascript-function-to-load-an-explicit-supersized-slide">doing</a> <a href="https://stackoverflow.com/questions/7038700/calling-function-of-a-jquery-plugin-supersized-via-its-api-as-part-of-a-cli">some</a> <a href="https://stackoverflow.com/questions/6904154/how-do-i-use-this-api-of-supersized-jquery-plugin">research</a> on this issue but can't quite seem to find the right answer. Basically, I'd like for Supersized to load a different background image for each link at the menu on the top of my example <a href="http://arijoseph.com/beta/" rel="nofollow noreferrer">here</a>. In other words, for each menu-item, I'd like to load a different background. </p>
  
  <p>Here's my markup: </p>
  
  <pre><code>&lt;link rel="stylesheet" href="styles.css" type="text/css" media="screen" title="no title" charset="utf-8" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery.easing.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/supersized.3.2.6.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="theme/supersized.shutter.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" charset="utf-8"&gt;
      $(document).ready(function() {
         $("body").addClass("has-js");
          $("form").bind("submit",function(event){
             event.preventDefault();
          });
         $("#banner a").bind("click",function(event){
             event.preventDefault();
             var target = $(this).attr("href");
             $("html, body").stop().animate({
                 scrollLeft: $(target).offset().left,
                 scrollTop: $(target).offset().top
             }, 1200);
         });
      });
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
              jQuery(function($){
  
                  $.supersized({
                  // Functionality
                      random: 1,
                      slide_interval:3000,
                      transition: 6,
                                      transition_speed        :   1000,
  
  // Slideshow Images
                                                          {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
                                                          {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},  
                                                          {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
                                                          {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
                                                                                                          ],                                          
  
                  });
  
              });
  
              $("#newsletter").click(function(){ api.goTo(2); });                 
  
  &lt;/script&gt;
  
  
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="banner"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;
                          &lt;a href="#home"&gt;Home&lt;/a&gt;
                      &lt;/li&gt;  
                      &lt;li&gt;   
                          &lt;a href="#newsletter"&gt;Newsletter&lt;/a&gt;
                      &lt;/li&gt;  
                      &lt;li&gt;   
                          &lt;a href="#directions"&gt;Directions &amp;amp; Opening Hours&lt;/a&gt;
                      &lt;/li&gt;  
                      &lt;li&gt;   
                          &lt;a href="#contact"&gt;Contact us&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>