title: jQuery Supersized Background & Div multiple function
body: <p>I would like to use the jQuery Supersized plugin to create a full background and a function to put a different image in a DIV. In this way should 2 various images will be visible and change sync. Unfortunately i can't get it done.. How can I make this work or is this not possible? </p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;!--
      Supersized - Fullscreen Slideshow jQuery Plugin
      Version : 3.2.7
      Site    : www.buildinternet.com/project/supersized
  
      Author  : Sam Dunn
      Company : One Mighty Roar (www.onemightyroar.com)
      License : MIT License / GPL License
  --&gt;
  
  &lt;head&gt;
  
      &lt;title&gt;Supersized - Full Screen Background Slideshow jQuery Plugin&lt;/title&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt;
  
      &lt;link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" /&gt;
      &lt;link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media="screen" /&gt;
  
      &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"&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.7.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="theme/supersized.shutter.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
  
          jQuery(function($){
  
              $.supersized({
  
                  // Functionality
                  slide_interval          :   3000,       
                  transition              :   1,          
                  transition_speed        :   700,    
  
                  // Components                           
                  slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                  slides                  :   [           
                                                      {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg'},
                                                      {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg'},  
                                                      {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg'}
                                              ]
              }); 
  
              $('#supersized2')({
  
                  // Functionality
                  slide_interval          :   3000,       
                  transition              :   1,          
                  transition_speed        :   700,    
  
                  // Components                           
                  slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
  
                     slides : [
                                  {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg'},
                                  {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg'},
                                  {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg'}
                     ]                  
  
              });
  
          }); 
  
  
      &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;style type="text/css"&gt;
      ul#demo-block{ margin:0 15px 15px 15px; }
          ul#demo-block li{ margin:0 0 10px 0; padding:10px; display:inline; float:left; clear:both; color:#aaa; background:url('img/bg-black.png'); font:11px Helvetica, Arial, sans-serif; }
          ul#demo-block li a{ color:#eee; font-weight:bold; }
  &lt;/style&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;div id="prevthumb"&gt;&lt;/div&gt;
  &lt;div id="nextthumb"&gt;&lt;/div&gt;
  
  &lt;a id="prevslide" class="load-item"&gt;&lt;/a&gt;
  &lt;a id="nextslide" class="load-item"&gt;&lt;/a&gt;
  
  &lt;div id="supersized2" style="position: absolute; z-index: 9999; width:400px; height: 400px; display: block;"&gt;  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>