SimpleSlideShow

docs

The SlideShow class lets you collect dom elements with next and previous links. A quick example:

new SimpleSlideShow({
  startIndex: 0,
  slides: $$('#slideShow p'),
  currentIndexContainer: 'slideNow', //an element or it's id
  maxContainer: 'slideMax',
  nextLink: 'ssNxt',
  prevLink: 'ssPrv'
});

And that's pretty much it.

This class works the same as the class above except rather than fading each slide in and out it uses a horizontal carousel.

new SimpleSlideShow.Carousel($('slideShow2'), {
  startIndex: 0,
  slides: $$('#slideShow2 p'),
  currentIndexContainer: 'slideNow2', //an element or it's id
  maxContainer: 'slideMax2',
  nextLink: 'ssNxt2',
  prevLink: 'ssPrv2'
});

Does pretty much the same thing as SimpleSlideShow but contains functions for handling images.

 of 

new SimpleImageSlideShow('screenShotImgs', {
  startIndex: 0,
  imgUrls: ['/wiki/art/1.jpg',
'/wiki/art/2.jpg',
'/wiki/art/3.jpg'],
  currentIndexContainer: 'imgNow',
  maxContainer: 'imgMax',
  nextLink: 'nextImg',
  prevLink: 'prevImg'
});

Alternatively, if your images are already in the page, you can use those. In this example I have all three images visible, but you might want to hide them until your javascript executes.

 of 

new SimpleImageSlideShow($('screenShotImgs2'), {
  startIndex: 0,
  slides: $$('div#screenShotImgs2 img'),
  currentIndexContainer: 'imgNow2',
  maxContainer: 'imgMax2',
  nextLink: 'nextImg2',
  prevLink: 'prevImg2'
});

You can also use .addImg(url) to insert more images into the gallery at any time. This example is like the one above. There are 3 images already loaded (and hidden until you create the slideshow object) and this code will create the slideshow and then add 3 more images.

 of 

var myGallery = new SimpleImageSlideShow($('screenShotImgs3'), {
  startIndex: 0,
  slides: $$('div#screenShotImgs3 img'),
  currentIndexContainer: 'imgNow3',
  maxContainer: 'imgMax3',
  nextLink: 'nextImg3',
  prevLink: 'prevImg3'
});
/*add some more images later...*/
myGallery.addImg('/wiki/art/4.jpg');
myGallery.addImg('/wiki/art/5.jpg');
myGallery.addImg('/wiki/art/6.jpg');

Does pretty much the same thing as SimpleImageSlideShow but uses the horizontal scrolling of SimpleSlideShow.Carousel.

 of 

new SimpleImageSlideShow.Carousel($('screenShotImgs4'), {
  startIndex: 0,
  imgUrls: ['/wiki/art/1.jpg',
'/wiki/art/2.jpg',
'/wiki/art/3.jpg'],
  currentIndexContainer: 'imgNow4',
  maxContainer: 'imgMax4',
  nextLink: 'nextImg4',
  prevLink: 'prevImg4'
});