====== SimpleSlideShow ====== [[http://www.clientcide.com/docs/Layout/SimpleSlideShow|docs]] The //SlideShow// class lets you collect dom elements with next and previous links. A quick example:

slide 1

slide 2

slide 3

slide 4

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

And that's pretty much it. ===== SimpleSlideShow.Carousel ===== This class works the same as the class above except rather than fading each slide in and out it uses a horizontal carousel.

slide 1

slide 2

slide 3

slide 4

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

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

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

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

===== SimpleImageSlideShow.Carousel ===== 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'
});