title: Changing fullscreen gallery navigation to bullet-navigation
body: <p>I'm a noob at modifying jQuery and have managed to do the odd simple piece of code, but its a bigger task for me to modify this gallery: <a href="http://buildinternet.com/project/supersized/" rel="nofollow">http://buildinternet.com/project/supersized/</a> - which currently uses a next/prev button and a digit counter e.g. 1/3, 2/3 etc...</p>
  
  <p>I need to simply change the digit counter to bullet counters as found on sliders like <a href="http://wowslider.com/" rel="nofollow">http://wowslider.com/</a>.</p>
  
  <p>I tinkered with the jquery and tried a few things, but the changes could be much more than I anticipated. Any hints or tips to get me going?</p>
  
  <p>Here is the actual JS:</p>
  
  <pre><code>(function($){
  
  //Add in Supersized elements
  $(document).ready(function() {
      $('body').prepend('&lt;div id="supersized-loader"&gt;&lt;/div&gt;').prepend('&lt;div id="supersized"&gt;&lt;/div&gt;');
  });
  
  //Resize image on ready or resize
  $.supersized = function( options ) {
  
      //Default settings
      var settings = {
  
          //Functionality
          slideshow               :   1,      //Slideshow on/off
          autoplay                :   1,      //Slideshow starts playing automatically
          start_slide             :   1,      //Start slide (0 is random)
          slide_interval          :   5000,   //Length between transitions
          transition              :   1,      //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
          transition_speed        :   750,    //Speed of transition
          new_window              :   1,      //Image links open in new window/tab
          pause_hover             :   0,      //Pause slideshow on hover
          keyboard_nav            :   1,      //Keyboard navigation on/off
          performance             :   1,      //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
          image_protect           :   1,      //Disables image dragging and right click with Javascript
          image_path              :   'img/', //Default image path
  
          //Size &amp; Position
          min_width               :   0,      //Min width allowed (in pixels)
          min_height              :   0,      //Min height allowed (in pixels)
          vertical_center         :   1,      //Vertically center background
          horizontal_center       :   1,      //Horizontally center background
          fit_portrait            :   0,      //Portrait images will not exceed browser height
          fit_landscape           :   0,      //Landscape images will not exceed browser width  
  
          //Components
          navigation              :   1,      //Slideshow controls on/off
          thumbnail_navigation    :   0,      //Thumbnail navigation
          slide_counter           :   1,      //Display slide numbers
          slide_captions          :   1       //Slide caption (Pull from "title" in slides array)
  
      };
  
      //Default elements
      var element = $('#supersized');     //Supersized container
      var pauseplay = '#pauseplay';       //Pause/Play
  
      //Combine options with default settings
      if (options) {
          var options = $.extend(settings, options);  //Pull from both defaults and supplied options
      }else{
          var options = $.extend(settings);           //Only pull from default settings       
      }
  
      //General slideshow variables
      var inAnimation = false;                    //Prevents animations from stacking
      var isPaused = false;                       //Tracks paused on/off
      var image_path = options.image_path;        //Default image path for navigation control buttons
  
      //Determine starting slide (random or defined)
      if (options.start_slide){
          var currentSlide = options.start_slide - 1; //Default to defined start slide
      }else{
          var currentSlide = Math.floor(Math.random()*options.slides.length); //Generate random slide number
      }
  
      //If links should open in new window
      var linkTarget = options.new_window ? ' target="_blank"' : '';
  
      //Set slideshow quality (Supported only in FF and IE, no Webkit)
      if (options.performance == 3){
          element.addClass('speed');      //Faster transitions
      } else if ((options.performance == 1) || (options.performance == 2)){
          element.addClass('quality');    //Higher image quality
      }
  
  
      /***Load initial set of images***/
  
      if (options.slides.length &gt; 1){
          //Set previous image
          currentSlide - 1 &lt; 0  ? loadPrev = options.slides.length - 1 : loadPrev = currentSlide - 1; //If slide is 1, load last slide as previous
          var imageLink = (options.slides[loadPrev].url) ? "href='" + options.slides[loadPrev].url + "'" : "";
          $("&lt;img/&gt;").attr("src", options.slides[loadPrev].image).appendTo(element).wrap('&lt;a ' + imageLink + linkTarget + '&gt;&lt;/a&gt;');
      }
  
      //Set current image
      imageLink = (options.slides[currentSlide].url) ? "href='" + options.slides[currentSlide].url + "'" : "";
      $("&lt;img/&gt;").attr("src", options.slides[currentSlide].image).appendTo(element).wrap('&lt;a class="activeslide" ' + imageLink + linkTarget + '&gt;&lt;/a&gt;');
  
      if (options.slides.length &gt; 1){
          //Set next image
          currentSlide == options.slides.length - 1 ? loadNext = 0 : loadNext = currentSlide + 1; //If slide is last, load first slide as next
          imageLink = (options.slides[loadNext].url) ? "href='" + options.slides[loadNext].url + "'" : "";
          $("&lt;img/&gt;").attr("src", options.slides[loadNext].image).appendTo(element).wrap('&lt;a ' + imageLink + linkTarget + '&gt;&lt;/a&gt;');
      }
      /***End load initial images***/
  
      element.hide();                 //Hide image to be faded in
      $('#controls-wrapper').hide();  //Hide controls to be displayed
  
      $(window).load(function(){
  
          $('#supersized-loader').hide();     //Hide loading animation
          element.fadeIn('fast');             //Fade in background
          $('#controls-wrapper').show();      //Display controls
  
          //Display thumbnails
          if (options.thumbnail_navigation){
  
              //Load previous thumbnail
              currentSlide - 1 &lt; 0  ? prevThumb = options.slides.length - 1 : prevThumb = currentSlide - 1;
              $('#prevthumb').show().html($("&lt;img/&gt;").attr("src", options.slides[prevThumb].image));
  
              //Load next thumbnail
              currentSlide == options.slides.length - 1 ? nextThumb = 0 : nextThumb = currentSlide + 1;
              $('#nextthumb').show().html($("&lt;img/&gt;").attr("src", options.slides[nextThumb].image));
  
          }
  
          resizenow();    //Resize background image
  
          if (options.slide_captions) $('#slidecaption').html(options.slides[currentSlide].title);        //Pull caption from array
          if (!(options.navigation)) $('#navigation').hide(); //Display navigation
  
  
          //Start slideshow if enabled
          if (options.slideshow &amp;&amp; options.slides.length &gt; 1){
  
              if (options.slide_counter){ //Initiate slide counter if active
  
                  $('#slidecounter .slidenumber').html(currentSlide + 1);     //Pull initial slide number from options        
                  $('#slidecounter .totalslides').html(options.slides.length);    //Pull total from length of array
  
              }
  
              slideshow_interval = setInterval(nextslide, options.slide_interval);    //Initiate slide interval
  
              //Prevent slideshow if autoplay disabled
              if (!(options.autoplay)){
  
                  clearInterval(slideshow_interval);  //Stop slideshow
                  isPaused = true;    //Mark as paused
  
                  if ($(pauseplay).attr('src')) $(pauseplay).attr("src", image_path + "play_dull.png");   //If pause play button is image, swap src
  
              }
  
              //Thumbnail Navigation
              if (options.thumbnail_navigation){
  
                  //Next thumbnail clicked
                  $('#nextthumb').click(function() {
  
                      if(inAnimation) return false;       //Abort if currently animating
  
                      clearInterval(slideshow_interval);  //Stop slideshow
                      nextslide(element, options);        //Go to next slide
                      if(!(isPaused)) slideshow_interval = setInterval(nextslide, options.slide_interval);    //If not paused, resume slideshow
  
                      return false;
  
                  });
  
                  //Previous thumbnail clicked
                  $('#prevthumb').click(function() {
  
                      if(inAnimation) return false;       //Abort if currently animating
  
                      clearInterval(slideshow_interval);  //Stop slideshow
                      prevslide(element, options);        //Go to previous slide
                      if(!(isPaused)) slideshow_interval = setInterval(nextslide, options.slide_interval);    //If not paused, resume slideshow
  
                      return false;
  
                  });
  
              }
  
              //Navigation controls
              if (options.navigation){
  
                  $('#navigation a').click(function(){  
                      $(this).blur();  
                      return false;  
                  });
  
                  //Next button clicked
                  $('#nextslide').click(function() {
  
                      if(inAnimation) return false;       //Abort if currently animating
  
                      clearInterval(slideshow_interval);  //Stop slideshow
                      nextslide();        //Go to next slide
                      if(!(isPaused)) slideshow_interval = setInterval(nextslide, options.slide_interval);    //If not paused, resume slideshow
  
                      return false;
  
                  });
  
                  //If next slide button is image
                  if ($('#nextslide').attr('src')){
  
                      $('#nextslide').mousedown(function() {
                          $(this).attr("src", image_path + "arrow_right_active.png");
                      });
                      $('#nextslide').mouseup(function() {
                          $(this).attr("src", image_path + "arrow_right_inactive.png");
                      });
                      $('#nextslide').mouseout(function() {
                          $(this).attr("src", image_path + "arrow_right_inactive.png");
                      });
  
                  }
  
                  //Previous button clicked
                  $('#prevslide').click(function() {
  
                      if(inAnimation) return false;       //Abort if currently animating
  
                      clearInterval(slideshow_interval);  //Stop slideshow
                      prevslide();        //Go to previous slide
                      if(!(isPaused)) slideshow_interval = setInterval(nextslide, options.slide_interval);    //If not paused, resume slideshow
  
                      return false;
  
                  });
  
                  //If previous slide button is image
                  if ($('#prevslide').attr('src')){
  
                      $('#prevslide').mousedown(function() {
                          $(this).attr("src", image_path + "arrow_left_active.png");
                      });
                      $('#prevslide').mouseup(function() {
                          $(this).attr("src", image_path + "arrow_left_inactive.png");
                      });
                      $('#prevslide').mouseout(function() {
                          $(this).attr("src", image_path + "arrow_left_inactive.png");
                      });
  
                  }
  
                  //Pause/play element clicked
                  $(pauseplay).click(function() {
  
                      if(inAnimation) return false;       //Abort if currently animating
  
                      if (isPaused){
  
                          if ($(pauseplay).attr('src')) $(pauseplay).attr("src", image_path + "pause_dull.png");  //If image, swap to pause
  
                          //Resume slideshow
                          isPaused = false;
                          slideshow_interval = setInterval(nextslide, options.slide_interval);
  
                      }else{
  
                          if ($(pauseplay).attr('src')) $(pauseplay).attr("src", image_path + "play_dull.png");   //If image, swap to play
  
                          //Stop slideshow
                          clearInterval(slideshow_interval);  
                          isPaused = true;
  
                      }
  
                      return false;
  
                  });
  
              }   //End navigation controls
  
          }   //End slideshow options
  
      });     //End window load
  
      //Keyboard Navigation
      if (options.keyboard_nav){
  
          $(document.documentElement).keydown(function (event) {
  
              if ((event.keyCode == 37) || (event.keyCode == 40)) { //Left Arrow or Down Arrow
  
                  if ($('#prevslide').attr('src')) $('#prevslide').attr("src", image_path + "arrow_left_active.png");     //If image, change back button to active
  
              } else if ((event.keyCode == 39) || (event.keyCode == 38)) { //Right Arrow or Up Arrow
  
                  if ($('#nextslide').attr('src')) $('#nextslide').attr("src", image_path + "arrow_right_active.png");    //If image, change next button to active
  
              }
  
          });
  
          $(document.documentElement).keyup(function (event) {
  
              clearInterval(slideshow_interval);  //Stop slideshow, prevent buildup
  
              if ((event.keyCode == 37) || (event.keyCode == 40)) { //Left Arrow or Down Arrow
  
                  if ($('#prevslide').attr('src')) $('#prevslide').attr("src", image_path + "arrow_left_inactive.png");   //If image, change back button to normal
  
                  if(inAnimation) return false;       //Abort if currently animating
  
                  clearInterval(slideshow_interval);  //Stop slideshow
                  prevslide();        //Go to previous slide
  
                  if(!(isPaused)) slideshow_interval = setInterval(nextslide, options.slide_interval);    //If not paused, resume slideshow
  
                  return false;
  
              } else if ((event.keyCode == 39) || (event.keyCode == 38)) { //Right Arrow or Up Arrow
  
                  if ($('#nextslide').attr('src')) $('#nextslide').attr("src", image_path + "arrow_right_inactive.png");  //If image, change next button to normal
  
                  if(inAnimation) return false;       //Abort if currently animating
  
                  clearInterval(slideshow_interval);  //Stop slideshow
                  nextslide();        //Go to next slide
  
                  if(!(isPaused)) slideshow_interval = setInterval(nextslide, options.slide_interval);    //If not paused, resume slideshow
  
                  return false;
  
              } else if (event.keyCode == 32) { //Spacebar
  
                  if(inAnimation) return false;       //Abort if currently animating
  
                  if (isPaused){
  
                      if ($(pauseplay).attr('src')) $(pauseplay).attr("src", image_path + "pause_dull.png");  //If image, swap to pause
  
                      //Resume slideshow
                      isPaused = false;
                      slideshow_interval = setInterval(nextslide, options.slide_interval);
  
                  }else{
  
                      if ($(pauseplay).attr('src')) $(pauseplay).attr("src", image_path + "play_dull.png");   //If image, swap to play
  
                      //Mark as paused
                      isPaused = true;
  
                  }
  
                  return false;
              }
  
          });
      }
  
  
      //Pause when hover on image
      if (options.slideshow &amp;&amp; options.pause_hover){
          $(element).hover(function() {
  
              if(inAnimation) return false;       //Abort if currently animating
  
                  if(!(isPaused) &amp;&amp; options.navigation){
  
                      if ($(pauseplay).attr('src')) $(pauseplay).attr("src", image_path + "pause.png");   //If image, swap to pause
                      clearInterval(slideshow_interval);
  
                  }
  
          }, function() {
  
              if(!(isPaused) &amp;&amp; options.navigation){
  
                  if ($(pauseplay).attr('src')) $(pauseplay).attr("src", image_path + "pause_dull.png");  //If image, swap to active
                  slideshow_interval = setInterval(nextslide, options.slide_interval);
  
              }
  
          });
      }
  
  
      //Adjust image when browser is resized
      $(window).resize(function(){
          resizenow();
      });
  
  
      //Adjust image size
      function resizenow() {
          return element.each(function() {
  
              var t = $('img', element);
  
              //Resize each image seperately
              $(t).each(function(){
                  var ratio = ($(this).height()/$(this).width()).toFixed(2);  //Define image ratio
  
                  //Gather browser size
                  var browserwidth = $(window).width();
                  var browserheight = $(window).height();
                  var offset;
  
                  //Resize image to proper ratio
                  if ((browserheight &gt; options.min_height) || (browserwidth &gt; options.min_width)){    //If window larger than minimum height or width
  
                      if ((browserheight/browserwidth) &gt; ratio){
  
                          if (options.fit_landscape &amp;&amp; ratio &lt;= 1){   //If landscapes are set to fit
                              $(this).width(browserwidth);
                              $(this).height(browserwidth * ratio);
                          }else{                                      //Otherwise handle normally
                              $(this).height(browserheight);
                              $(this).width(browserheight / ratio);
                          }
  
                      } else {
  
                          if (options.fit_portrait &amp;&amp; ratio &gt; 1){ //If portraits are set to fit
                              $(this).height(browserheight);
                              $(this).width(browserheight / ratio);
                          }else{                                      //Otherwise handle normally
                              $(this).width(browserwidth);
                              $(this).height(browserwidth * ratio);
                          }
  
                      }   //End dynamic resizing
  
                  }   //End minimum size check
  
                  //Horizontally Center
                  if (options.horizontal_center){
                      $(this).css('left', (browserwidth - $(this).width())/2);
                  }
  
                  //Vertically Center
                  if (options.vertical_center){
                      $(this).css('top', (browserheight - $(this).height())/2);
                  }
  
              });
  
              //Basic image drag and right click protection
              if (options.image_protect){
  
                  $('img', element).bind("contextmenu",function(){
                      return false;
                  });
                  $('img', element).bind("mousedown",function(){
                      return false;
                  });
  
              }
  
              return false;
  
          });
      };
  
  
      //Next slide
      function nextslide() {
  
          if(inAnimation) return false;       //Abort if currently animating
              else inAnimation = true;        //Otherwise set animation marker
  
          var slides = options.slides;    //Pull in slides array
  
          var currentslide = element.find('.activeslide');        //Find active slide
          currentslide.removeClass('activeslide');                //Remove active class
  
          if ( currentslide.length == 0 ) currentslide = element.find('a:last');  //If end of set, note this is last slide
          var nextslide = currentslide.next().length ? currentslide.next() : element.find('a:first');
          var prevslide = nextslide.prev().length ? nextslide.prev() : element.find('a:last');
  
          //Update previous slide
          $('.prevslide').removeClass('prevslide');
          prevslide.addClass('prevslide');
  
          //Get the slide number of new slide
          currentSlide + 1 == slides.length ? currentSlide = 0 : currentSlide++;
  
          //If hybrid mode is on drop quality for transition
          if (options.performance == 1) element.removeClass('quality').addClass('speed'); 
  
          /**** Image Loading ****/
  
          //Load next image
          loadSlide = false;
  
          currentSlide == slides.length - 1 ? loadSlide = 0 : loadSlide = currentSlide + 1;   //Determine next slide
          imageLink = (options.slides[loadSlide].url) ? "href='" + options.slides[loadSlide].url + "'" : "";  //If link exists, build it
          $("&lt;img/&gt;").attr("src", options.slides[loadSlide].image).appendTo(element).wrap("&lt;a " + imageLink + linkTarget + "&gt;&lt;/a&gt;");  //Append new image
  
          //Update thumbnails (if enabled)
          if (options.thumbnail_navigation == 1){
  
              //Load previous thumbnail
              currentSlide - 1 &lt; 0  ? prevThumb = slides.length - 1 : prevThumb = currentSlide - 1;
              $('#prevthumb').html($("&lt;img/&gt;").attr("src", options.slides[prevThumb].image));
  
              //Load next thumbnail
              nextThumb = loadSlide;
              $('#nextthumb').html($("&lt;img/&gt;").attr("src", options.slides[nextThumb].image));
  
          }
  
          currentslide.prev().remove(); //Remove Old Image
  
          /**** End Image Loading ****/
  
  
          //Update slide number
          if (options.slide_counter){
              $('#slidecounter .slidenumber').html(currentSlide + 1);
          }
  
          //Update captions
          if (options.slide_captions){
              (options.slides[currentSlide].title) ? $('#slidecaption').html(options.slides[currentSlide].title) : $('#slidecaption').html('');
          }
  
          nextslide.hide().addClass('activeslide');   //Update active slide
  
          switch(options.transition){
  
              case 0:    //No transition
                  nextslide.show(); inAnimation = false;
                  break;
              case 1:    //Fade
                  nextslide.fadeTo(options.transition_speed, 1, function(){ afterAnimation(); });
                  break;
              case 2:    //Slide Top
                  nextslide.animate({top : -$(window).height()}, 0 ).show().animate({ top:0 }, options.transition_speed, function(){ afterAnimation(); });
                  break;
              case 3:    //Slide Right
                  nextslide.animate({left : $(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); });
                  break;
              case 4:    //Slide Bottom
                  nextslide.animate({top : $(window).height()}, 0 ).show().animate({ top:0 }, options.transition_speed, function(){ afterAnimation(); });
                  break;
              case 5:    //Slide Left
                  nextslide.animate({left : -$(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); });
                  break;
              case 6:    //Carousel Right
                  nextslide.animate({left : $(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); });
                  currentslide.animate({ left: -$(window).width() }, options.transition_speed );
                  break;
              case 7:    //Carousel Left
                  nextslide.animate({left : -$(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); });
                  currentslide.animate({ left: $(window).width() }, options.transition_speed );
                  break;
          };
  
  
  
      }
  
  
      //Previous Slide
      function prevslide() {
  
          if(inAnimation) return false;       //Abort if currently animating
              else inAnimation = true;        //Otherwise set animation marker
  
          var slides = options.slides;    //Pull in slides array
  
          var currentslide = element.find('.activeslide');        //Find active slide
          currentslide.removeClass('activeslide');                //Remove active class
  
          if ( currentslide.length == 0 ) currentslide = $(element).find('a:first');  //If end of set, note this is first slide
          var nextslide =  currentslide.prev().length ? currentslide.prev() : $(element).find('a:last');
          var prevslide =  nextslide.next().length ? nextslide.next() : $(element).find('a:first');
  
          //Update previous slide
          $('.prevslide').removeClass('prevslide');
          prevslide.addClass('prevslide');
  
          //Get current slide number
          currentSlide == 0 ?  currentSlide = slides.length - 1 : currentSlide-- ;
  
          //If hybrid mode is on drop quality for transition
          if (options.performance == 1) element.removeClass('quality').addClass('speed'); 
  
          /**** Image Loading ****/
  
          //Load next image
          loadSlide = false;
  
          currentSlide - 1 &lt; 0  ? loadSlide = slides.length - 1 : loadSlide = currentSlide - 1;   //Determine next slide
          imageLink = (options.slides[loadSlide].url) ? "href='" + options.slides[loadSlide].url + "'" : "";  //If link exists, build it
          $("&lt;img/&gt;").attr("src", options.slides[loadSlide].image).prependTo(element).wrap("&lt;a " + imageLink + linkTarget + "&gt;&lt;/a&gt;"); //Append new image
  
          //Update thumbnails (if enabled)
          if (options.thumbnail_navigation == 1){
  
              //Load previous thumbnail
              prevThumb = loadSlide;
              $('#prevthumb').html($("&lt;img/&gt;").attr("src", options.slides[prevThumb].image));
  
              //Load next thumbnail
              currentSlide == slides.length - 1 ? nextThumb = 0 : nextThumb = currentSlide + 1;
              $('#nextthumb').html($("&lt;img/&gt;").attr("src", options.slides[nextThumb].image));
          }
  
          currentslide.next().remove(); //Remove Old Image
  
          /**** End Image Loading ****/
  
  
          //Update slide counter
          if (options.slide_counter){
              $('#slidecounter .slidenumber').html(currentSlide + 1);
          }
  
          //Update captions
          if (options.slide_captions){
              (options.slides[currentSlide].title) ? $('#slidecaption').html(options.slides[currentSlide].title) : $('#slidecaption').html('');
          }
  
          nextslide.hide().addClass('activeslide');   //Update active slide
  
          switch(options.transition){
  
              case 0:    //No transition
                  nextslide.show(); inAnimation = false;
                  break;
              case 1:    //Fade
                  nextslide.fadeTo(options.transition_speed, 1, function(){ afterAnimation(); });
                  break;
              case 2:    //Slide Top (reverse)
                  nextslide.animate({top : $(window).height()}, 0 ).show().animate({ top:0 }, options.transition_speed, function(){ afterAnimation(); });
                  break;
              case 3:    //Slide Right (reverse)
                  nextslide.animate({left : -$(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); });
                  break;
              case 4:    //Slide Bottom (reverse)
                  nextslide.animate({top : -$(window).height()}, 0 ).show().animate({ top:0 }, options.transition_speed, function(){ afterAnimation(); });
                  break;
              case 5:    //Slide Left (reverse)
                  nextslide.animate({left : $(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); });
                  break;
              case 6:    //Carousel Right (reverse)
                  nextslide.animate({left : -$(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); });
                  currentslide.animate({ left: $(window).width() }, options.transition_speed );
                  break;
              case 7:    //Carousel Left (reverse)
                  nextslide.animate({left : $(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); });
                  currentslide.animate({ left: -$(window).width() }, options.transition_speed );
                  break;  
          };
  
      }
  
      //After slide animation
      function afterAnimation() {
  
          inAnimation = false; 
  
          //If hybrid mode is on swap back to higher image quality
          if (options.performance == 1){
              element.removeClass('speed').addClass('quality');
          }
  
          resizenow();
  
      }
  
  };
  
  })(jQuery);
  </code></pre>
  
  <p>in the HEAD</p>
  
  <pre><code>&lt;link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" /&gt; 
  
      &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"&gt;&lt;/script&gt; 
      &lt;script type="text/javascript" src="js/supersized.3.1.1.min.js"&gt;&lt;/script&gt; 
  
      &lt;script type="text/javascript"&gt;  
  
          jQuery(function($){
              $.supersized({
  
                  //Functionality
                  slideshow               :   1,      //Slideshow on/off
                  autoplay                :   1,      //Slideshow starts playing automatically
                  start_slide             :   1,      //Start slide
                  slide_interval          :   3000,   //Length between transitions
                  transition              :   1,      //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                  transition_speed        :   500,    //Speed of transition
                  new_window              :   1,      //Image links open in new window/tab
                  pause_hover             :   0,      //Pause slideshow on hover
                  keyboard_nav            :   1,      //Keyboard navigation on/off
                  performance             :   1,      //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
  
                  //Size &amp; Position
                  min_width               :   0,      //Min width allowed (in pixels)
                  min_height              :   0,      //Min height allowed (in pixels)
                  vertical_center         :   1,      //Vertically center background
                  horizontal_center       :   1,      //Horizontally center background
                  fit_portrait            :   1,      //Portrait images will not exceed browser height
                  fit_landscape           :   0,      //Landscape images will not exceed browser width
  
                  //Components
                  navigation              :   1,      //Slideshow controls on/off
                  thumbnail_navigation    :   1,      //Thumbnail navigation
                  slide_counter           :   1,      //Display slide numbers
                  slide_captions          :   1,      //Slide caption (Pull from "title" in slides array)
                  slides                  :   [       //Slideshow Images
                                                      {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/quietchaos-kitty.jpg', title : 'Quiet Chaos by Kitty Gallannaugh', url : 'http://www.nonsensesociety.com/2010/12/kitty-gallannaugh/'},
                                                      {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/day3-emily.jpg', title : 'Day 3 by Emily Tebbetts', url : 'http://www.nonsensesociety.com/2011/02/larissa/'},  
                                                      {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/wilderness2.jpg', title : 'Wilderness by Larissa Felsen', url : 'http://www.nonsensesociety.com/2011/02/larissa/'} 
                                              ]
  
              }); 
          });
  
      &lt;/script&gt; 
  </code></pre>
  
  <p>Body:</p>
  
  <pre><code>&lt;!--Thumbnail Navigation--&gt; 
  &lt;div id="prevthumb"&gt;&lt;/div&gt; &lt;div id="nextthumb"&gt;&lt;/div&gt; 
  
  &lt;!--Control Bar--&gt; 
  &lt;div id="controls-wrapper"&gt; 
      &lt;div id="controls"&gt; 
  
          &lt;!--Slide counter--&gt; 
          &lt;div id="slidecounter"&gt; 
              &lt;span class="slidenumber"&gt;&lt;/span&gt;/&lt;span class="totalslides"&gt;&lt;/span&gt; 
          &lt;/div&gt; 
  
          &lt;!--Slide captions displayed here--&gt; 
          &lt;div id="slidecaption"&gt;&lt;/div&gt; 
  
          &lt;!--Navigation--&gt; 
          &lt;div id="navigation"&gt; 
              &lt;img id="prevslide" src="img/back_dull.png"/&gt;&lt;img id="pauseplay" src="img/pause_dull.png"/&gt;&lt;img id="nextslide" src="img/forward_dull.png"/&gt; 
          &lt;/div&gt; 
  
      &lt;/div&gt; 
  &lt;/div&gt; 
  </code></pre>
  
  <p>Hopefully the above helps.</p>
  
  <p>thanks!</p>