I need a slide show script for my portfolio pages but couldn’t find a good one anywhere so I decided to write one myself. The slide show script will be able to display image and the respective description in a predefined order. However, in this version, visitors would not be able to directly jump to a particular slide yet. The script is written in prototype’s object-orientation approach hence you need to have prototype called.

Prerequisite

1. Latest Prototype Javascript Framework and Scrit.aculo.us library
2. Call the slide show script file which you can download from here
3. Insert the images into a a list with id olImageSlide in following format:
   
<ol id="olImageSlide">
<li id="liImageSlide1"><!--Insert image here-></li>
<li id="liImageSlide2"><!--Insert image here-></li>
</ol>

   Notice the increment of value in the list element id.
4. Insert the images into a a list with id olDescriptionSlide in following format:
   
<ol id="olDescriptionSlide">
<li id="liDescriptionSlide1"><!--Insert Description here-></li>
<li id="liDescriptionSlide2"><!--Insert Description here-></li>
</ol>

   Notice the increment of value in the list element id.
5. Done!

Demo

Note

It is advisible to have all the image cropped into the same size.