Need some help tweaking the supersized jquery plugin

Question

Hi, I'm using this plugin http://www.buildintearnet.com/2010/11/supersized-3-0-full-screen-background-slideshow-jque ry-plugin/ on my site here - http://www.blackpaint.co.uk/new/
The plugin cycles through as many images as yuo tell it to, when it reaches the last image it starts from the beginning again. I would like to make it through 3 images and then stop on the last.
here is the code:
<!--START SCRIPT FOR BG IMAGES CHANGE -->
     <script type="text/javascript" src="supersized3/supersized.3.0.js"></script>
     <script type="text/javascript"> 
          $(function(){
               $.fn.supersized.options = { 
                    startwidth: 640, 
                    startheight: 377,
                    vertical_center: 1,
                    slideshow: 1,
                    navigation: 0,
                    thumbnail_navigation: 0,
                    transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
                    pause_hover: 0,
                    slide_counter: 0,
                    slide_captions: 0,
                    slide_interval: 200,
                    slides : [
                         {image : 'supersized3/slides/1.jpg'},{image : 'supersized3/slides/2.jpg'},
                         {image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},
             $('#supersized').supersized();
     </script>
    <!--END SCRIPT FOR FONT BG IMAGES CHANGE -->
As you can see, my clunky work-around is to simply to repeat the last image over and over again - not very elegant and I imagine it uses up the users RAM.
Any suggestions of how to go about fixing this? Please note, I'm terrible with javascript syntax as of yet.
Many thanks for any help,
Luke

Answer 1

I have an altered version of the .js file that is meant to be able to control playback etc. But it's not working for me if I just replace my existing file with this one (obviously).
Any ideas on how to control this code? Here it is:
(function($){
     //Resize image on ready or resize
     $.fn.supersized = function() {
          $.inAnimation = false;
          $.paused = false;
          var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
          $.currentSlide = options.start_slide - 1;
          /******Set up initial images -- Add class doesnt work*****/
          //Set previous image
          var imageLink = (options.slides[options.slides.length - 1].url) ? "href='" + options.slides[options.slides.length - 1].url + "'" : "";
          $("<img/>").attr("src", options.slides[options.slides.length - 1].image).appendTo("#supersized").wrap("<a " + imageLink + "></a>");//Doesnt account for start slide
          //Set current image
          imageLink = (options.slides[$.currentSlide].url) ? "href='" + options.slides[$.currentSlide].url + "'" : "";
          $("<img/>").attr("src", options.slides[$.currentSlide].image).appendTo("#supersized").wrap("<a class=\"activeslide\" " + imageLink + "></a>");
          //Set next image
          imageLink = (options.slides[$.currentSlide + 1].url) ? "href='" + options.slides[$.currentSlide + 1].url + "'" : "";
          $("<img/>").attr("src", options.slides[$.currentSlide + 1].image).appendTo("#supersized").wrap("<a " + imageLink + "></a>");
          $(window).bind("load", function(){
               $('#loading').hide();
               $('#supersized').fadeIn('fast');
               $('#controls-wrapper').show();
               if (options.thumbnail_navigation == 1){
                    /*****Set up thumbnails****/
                    //Load previous thumbnail
                    $.currentSlide - 1 < 0  ? prevThumb = options.slides.length - 1 : prevThumb = $.currentSlide - 1;
                    $('#prevthumb').show().html($("<img/>").attr("src", options.slides[prevThumb].image));
                    //Load next thumbnail
                    $.currentSlide == options.slides.length - 1 ? nextThumb = 0 : nextThumb = $.currentSlide + 1;
                    $('#nextthumb').show().html($("<img/>").attr("src", options.slides[nextThumb].image));
               $('#supersized').resizenow();
               if (options.slide_captions == 1) $('#slidecaption').html(options.slides[$.currentSlide].title);//*********Pull caption from array
               if (options.slide_autoplay == 0) $('#pauseplay').hide();
               if (options.navigation == 0) $('#navigation').hide();
               if (options.thumbnail_navigation == 0){ $('#nextthumb').hide(); $('#prevthumb').hide(); }
               //Slideshow
               if (options.slideshow == 1){
                    if (options.slide_counter == 1){ //Initiate slide counter if active
                         $('#slidecounter .slidenumber').html(options.start_slide);
                        $('#slidecounter .totalslides').html(options.slides.length); //*******Pull total from length of array
                    if (options.slide_autoplay == 1) slideshow_interval = setInterval(nextslide, options.slide_interval);
                    function resetSlideInterval() {
                         if (options.slide_autoplay == 1){
                              clearInterval(slideshow_interval);
                              if(!($.paused)) slideshow_interval = setInterval(nextslide, options.slide_interval);
                    if (options.thumbnail_navigation == 1){
                         //Thumbnail Navigation
                         $('#nextthumb').click(function() {
                             if($.inAnimation) return false;
                             nextslide();
                             resetSlideInterval();
                             return false;
                        $('#prevthumb').click(function() {
                             if($.inAnimation) return false;
                            prevslide();
                            resetSlideInterval();                      
                            return false;
                    if (options.navigation == 1){ //Skip if no navigation
                         $('#navigation a').click(function(){ 
                                 $(this).blur(); 
                                 return false; 
                         //Slide Navigation
                        $('#nextslide').click(function() {
                             if($.inAnimation) return false;
                             nextslide();
                              resetSlideInterval();
                             return false;
                        $('#prevslide').click(function() {
                             if($.inAnimation) return false;
                            prevslide();
                            resetSlideInterval();
                            return false;
                        $('#nextslide').mousedown(function() {
                                 $(this).attr("src", "images/supersized/forward.png");
                         $('#nextslide').mouseup(function() {
                             $(this).attr("src", "images/supersized/forward_dull.png");
                         $('#nextslide').mouseout(function() {
                             $(this).attr("src", "images/supersized/forward_dull.png");
                         $('#prevslide').mousedown(function() {
                             $(this).attr("src", "images/supersized/back.png");
                         $('#prevslide').mouseup(function() {
                             $(this).attr("src", "images/supersized/back_dull.png");
                         $('#prevslide').mouseout(function() {
                             $(this).attr("src", "images/supersized/back_dull.png");
                         if (options.slide_autoplay == 1){
                              //Play/Pause Button
                              $('#pauseplay').click(function() {
                                   if($.inAnimation) return false;
                                   var src = ($(this).attr("src") === "images/supersized/play.png") ? "images/supersized/pause.png" : "images/supersized/play.png";
                                   if (src == "images/supersized/pause.png"){
                                        $(this).attr("src", "images/supersized/play.png");
                                        $.paused = false;
                                        slideshow_interval = setInterval(nextslide, options.slide_interval); 
                                   }else{
                                        $(this).attr("src", "images/supersized/pause.png");
                                        clearInterval(slideshow_interval);
                                        $.paused = true;
                                   $(this).attr("src", src);
                                   return false;
                              $('#pauseplay').mouseover(function() {
                                   var imagecheck = ($(this).attr("src") === "images/supersized/play_dull.png");
                                   if (imagecheck){
                                        $(this).attr("src", "images/supersized/play.png");
                                   }else{
                                        $(this).attr("src", "images/supersized/pause.png");
                              $('#pauseplay').mouseout(function() {
                                   var imagecheck = ($(this).attr("src") === "images/supersized/play.png");
                                   if (imagecheck){
                                        $(this).attr("src", "images/supersized/play_dull.png");
                                   }else{
                                        $(this).attr("src", "images/supersized/pause_dull.png");
                                   return false;
          $(document).ready(function() {
               $('#supersized').resizenow();
          if (options.slide_autoplay == 1){
          //Pause when hover on image
               $('#supersized').hover(function() {
                    if (options.slideshow == 1 && options.pause_hover == 1){
                         if(!($.paused) && options.navigation == 1){
                              $('#pauseplay').attr("src", "images/supersized/pause.png");
                              clearInterval(slideshow_interval);
                    if($.inAnimation) return false; //*******Pull title from array
               }, function() {
                    if (options.slideshow == 1 && options.pause_hover == 1){
                         if(!($.paused) && options.navigation == 1){
                              $('#pauseplay').attr("src", "images/supersized/pause_dull.png");
                              slideshow_interval = setInterval(nextslide, options.slide_interval);
                         //*******Pull title from array
          $(window).bind("resize", function(){
              $('#supersized').resizenow();
          $('#supersized').hide();
          $('#controls-wrapper').hide();
     //Adjust image size
     $.fn.resizenow = function() {
          var t = $(this);
          var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
            return t.each(function() {
               //Define image ratio
               var ratio = options.startheight/options.startwidth;
               //Gather browser and current image size
               var imagewidth = t.width();
               var imageheight = t.height();
               var browserwidth = $(window).width();
               var browserheight = $(window).height();
               var offset;
               //Resize image to proper ratio
               if ((browserheight/browserwidth) > ratio){
                   t.height(browserheight);
                   t.width(browserheight / ratio);
                   t.children().height(browserheight);
                   t.children().width(browserheight / ratio);
               } else {
                   t.width(browserwidth);
                   t.height(browserwidth * ratio);
                   t.children().width(browserwidth);
                   t.children().height(browserwidth * ratio);
               if (options.vertical_center == 1){
                    t.children().css('left', (browserwidth - t.width())/2);
                    t.children().css('top', (browserheight - t.height())/2);
               return false;
     function resetSlideInterval() {
          if (options.slideshow == 1){
               clearInterval(slideshow_interval);
              if(!($.paused)) slideshow_interval = setInterval(nextslide, options.slide_interval);
     //Slideshow Next Slide
     function nextslide() {
          if($.inAnimation) return false;
          else $.inAnimation = true;
         var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
          var currentslide = $('#supersized .activeslide');
         currentslide.removeClass('activeslide');
         if ( currentslide.length == 0 ) currentslide = $('#supersized a:last'); //*******Check if end of array?
         var nextslide =  currentslide.next().length ? currentslide.next() : $('#supersized a:first'); //*******Array
         var prevslide =  nextslide.prev().length ? nextslide.prev() : $('#supersized a:last'); //*******Array
          $('.prevslide').removeClass('prevslide');
          prevslide.addClass('prevslide');
          //Get the slide number of new slide
          $.currentSlide + 1 == options.slides.length ? $.currentSlide = 0 : $.currentSlide++;
          /**** Image Loading ****/
          //Load next image
          loadSlide=false;
          $.currentSlide == options.slides.length - 1 ? loadSlide = 0 : loadSlide = $.currentSlide + 1;
          imageLink = (options.slides[loadSlide].url) ? "href='" + options.slides[loadSlide].url + "'" : "";
          $("<img/>").attr("src", options.slides[loadSlide].image).appendTo("#supersized").wrap("<a " + imageLink + "></a>");
          if (options.thumbnail_navigation == 1){
          //Load previous thumbnail
          $.currentSlide - 1 < 0  ? prevThumb = options.slides.length - 1 : prevThumb = $.currentSlide - 1;
          $('#prevthumb').html($("<img/>").attr("src", options.slides[prevThumb].image));
          //Load next thumbnail
          nextThumb = loadSlide;
          $('#nextthumb').html($("<img/>").attr("src", options.slides[nextThumb].image));
          currentslide.prev().remove(); //Remove Old Image
          /**** End Image Loading ****/
          //Display slide counter
          if (options.slide_counter == 1){
              $('#slidecounter .slidenumber').html($.currentSlide + 1);//**display current slide after checking if last
          //Captions
         if (options.slide_captions == 1){
              (options.slides[$.currentSlide].title) ? $('#slidecaption').html(options.slides[$.currentSlide].title) : $('#slidecaption').html('') ; //*******Grab next slide's title from array
         nextslide.hide().addClass('activeslide')
              if (options.transition == 0){
                   nextslide.show(); $.inAnimation = false;
              if (options.transition == 1){
                   nextslide.fadeIn(750, function(){$.inAnimation = false;});
              if (options.transition == 2){
                   nextslide.show("slide", { direction: "up" }, 'slow', function(){$.inAnimation = false;});
              if (options.transition == 3){
                   nextslide.show("slide", { direction: "right" }, 'slow', function(){$.inAnimation = false;});
              if (options.transition == 4){
                   nextslide.show("slide", { direction: "down" }, 'slow', function(){$.inAnimation = false;});
              if (options.transition == 5){
                   nextslide.show("slide", { direction: "left" }, 'slow', function(){$.inAnimation = false;});
         $('#supersized').resizenow();
     //Slideshow Previous Slide
     function prevslide() {
          if($.inAnimation) return false;
          else $.inAnimation = true;
          var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
         var currentslide = $('#supersized .activeslide');
         currentslide.removeClass('activeslide');
         if ( currentslide.length == 0 ) currentslide = $('#supersized a:first');
         var nextslide =  currentslide.prev().length ? currentslide.prev() : $('#supersized a:last'); //****** If equal to total length of array
         var prevslide =  nextslide.next().length ? nextslide.next() : $('#supersized a:first');
          //Get current slide number
          $.currentSlide == 0 ?  $.currentSlide = options.slides.length - 1 : $.currentSlide-- ;
          /**** Image Loading ****/
          //Load next image
          loadSlide=false;
          $.currentSlide - 1 < 0  ? loadSlide = options.slides.length - 1 : loadSlide = $.currentSlide - 1;
          imageLink = (options.slides[loadSlide].url) ? "href='" + options.slides[loadSlide].url + "'" : "";
          $("<img/>").attr("src", options.slides[loadSlide].image).prependTo("#supersized").wrap("<a " + imageLink + "></a>");
          if (options.thumbnail_navigation == 1){
          //Load previous thumbnail
          prevThumb = loadSlide;
          $('#prevthumb').html($("<img/>").attr("src", options.slides[prevThumb].image));
          //Load next thumbnail
          $.currentSlide == options.slides.length - 1 ? nextThumb = 0 : nextThumb = $.currentSlide + 1;
          $('#nextthumb').html($("<img/>").attr("src", options.slides[nextThumb].image));
          currentslide.next().remove(); //Remove Old Image
          /**** End Image Loading ****/
          //Display slide counter
          if (options.slide_counter == 1){
              $('#slidecounter .slidenumber').html($.currentSlide + 1);
          $('.prevslide').removeClass('prevslide');
          prevslide.addClass('prevslide');
          //Captions
         if (options.slide_captions == 1){
              (options.slides[$.currentSlide].title) ? $('#slidecaption').html(options.slides[$.currentSlide].title) : $('#slidecaption').html('') ; //*******Grab next slide's title from array
         nextslide.hide().addClass('activeslide')
              if (options.transition == 0){
                   nextslide.show(); $.inAnimation = false;
              if (options.transition == 1){
                   nextslide.fadeIn(750, function(){$.inAnimation = false;});
              if (options.transition == 2){
                   nextslide.show("slide", { direction: "down" }, 'slow', function(){$.inAnimation = false;});
              if (options.transition == 3){
                   nextslide.show("slide", { direction: "left" }, 'slow', function(){$.inAnimation = false;});
              if (options.transition == 4){
                   nextslide.show("slide", { direction: "up" }, 'slow', function(){$.inAnimation = false;});
              if (options.transition == 5){
                   nextslide.show("slide", { direction: "right" }, 'slow', function(){$.inAnimation = false;});
              $('#supersized').resizenow();//Fix for resize mid-transition
     $.fn.supersized.defaults = {
               startwidth: 4, 
               startheight: 3,
               vertical_center: 1,
               slideshow: 1,
               navigation:1,
               thumbnail_navigation: 1,
               transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
               pause_hover: 0,
               slide_counter: 1,
               slide_captions: 1,
               slide_interval: 5000,
               start_slide: 1,
               slide_autoplay:0,
})(jQuery);