Monday, March 23, 2009

DirSlideShow and MultiSlideShow

These two scripts conceal all server-side directory indexing through a JSON interface, allowing you to set the location of the target pictures through the instantiation of one of the slide shows. If you'd like to see how to use DirSlideShow and MultiSlideShow, please check out this no-jargon tutorial.


DirSlideShow takes four arguments, which are listed below.

  • newPictureDir:String — The URL of the directory containing the pictures to be displayed.
  • newslideShowID:String — The id of the HTML element to which the slide show (and possibly control buttons) will be appended.
  • newRotateDelay:Number — The time (in milliseconds) until the next picture is displayed automatically. If the user clicks on one of the control buttons, the slide show will stop progressing automatically.
  • newControlButtons:Boolean — A boolean that determines if two buttons are displayed to allow the user can control the progression of the slide show.

Below is DirSlideShow's function signature:

DirSlideShow = function(newPictureDir, newSlideShowID, newRotateDelay, newControlButtons) {


MultiSlideShow takes two arguments:

  • newPictureDir:String — The URL of a directory which contains the picture directories.
  • newContainerID:String — The id of the HTML element to which the thumbnails will be appended.

Below is the function signature of MultiSlideShow:

MultiSlideShow = function(newPictureDir, newContainerID) {


I am releasing the source code of DirSlideShow and MultiSlideShow under the Apache 2.0 license.

DirSlideShow and MultiSlideShow Source Code


DirSlideShow Demo

MultiSlideShow Demo