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
- Latest Prototype Javascript Framework and Scrit.aculo.us library
- Call the slide show script file which you can download from here
-
Insert the images into a a list with id
olImageSlidein 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. -
Insert the images into a a list with id
olDescriptionSlidein 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. - Done!
Demo
-
Slide 1
This is the description for the first slide
-
Slide 2
This is the description for the second slide and is relatively longer
Note
It is advisible to have all the image cropped into the same size.
I have sent you an email few weeks ago but there is no reply. Perhaps it was blocked? Anyway i found it working on ur portfolio site while testing with fx3