SimpleSlideShow

docs

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

slide of Previous | Next

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

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.

slide of Previous | Next

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

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.

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'
});

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.

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

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.

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');

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.

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'
});

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' });