Question

This is the slideshow that we used:

http://www.littlewebthings.com/projects/blinds/

and this is the JS file:

http://www.littlewebthings.com/projects/blinds/js/jquery.blinds-0.9.js

However, this slideshow doesn’t have a setting that makes it go through each image automatically. You still have to click on the numbers below it to see the images. Does anybody know what to add into the javascript code to make it go through each image automatically?

Thanks!

Answer 1

This solution uses closures and recursion.

var SlideChanger = function(seconds_each) {
  var index = -1; 
  // on the first cycle, index will be set to zero below
  var maxindex = ($(".change_link").length) - 1; 
  // how many total slides are there (count the slide buttons)
  var timer = function() { 
  // this is the function returned by SlideChanger
    var logic = function() { 
    // this is an inner function which uses the 
    // enclosed values (index and maxindex) to cycle through the slides
      if (index == maxindex) 
        index = 0; // reset to first slide
      else
        index++; // goto next slide, set index to zero on first cycle
      $('.slideshow').blinds_change(index); // this is what changes the slide
      setTimeout(logic, 1000 * seconds_each); 
      // schedule ourself to run in the future
    }
    logic(); // get the ball rolling
  }
  return timer; // give caller the function
}

SlideChanger(5)(); // get the function at five seconds per slide and run it

What we are doing here is exposing the inner function timer outside of the function in which it was defined (SlideChanger). This function (timer) has access to the variables defined inside of SlideChanger (index and maxindex).

Now that we have set up the variables in the enclosing environment and a function to return to the caller, we can set up the logical engine in logic. When logic is run, it uses index and maxindex to determine which slide should be shown next, shows the slide, and schedules itself to be run again in the future.

When called, the returning function calls logic to get the ball rolling. Then logic repeats indefinitely by scheduling itself to run in the future each time it is run.

So, to summarize, we call SlideChanger with a numeric argument x. It returns a function that, after being called, will change the slide every x seconds.

Another way to write the same concept.

(function(seconds_each) {
  var index = -1; 
  // on the first cycle, index will be set to zero below
  var maxindex = ($(".change_link").length) - 1; 
  // how many total slides are there (count the slide buttons)
  return function() { 
  // this is the function returned by SlideChanger
    var logic = function() { 
    // this is an inner function which uses the 
    // enclosed values (index and maxindex) to cycle through the slides
      if (index == maxindex) 
        index = 0; // reset to first slide
      else
        index++; // goto next slide, set index to zero on first cycle
      $('.slideshow').blinds_change(index); // this is what changes the slide
      setTimeout(logic, 1000 * seconds_each); 
      // schedule ourself to run in the future
    }
    logic(); // get the ball rolling
  }
})(5)(); // get the function at five seconds per slide and run it

JavaScript is a nice language with many functional programming constructs such as higher order functions (functions that either create functions or accept functions as parameters) and anonymous functions. For more info see http://www.ibm.com/developerworks/web/library/wa-javascript.html