Click to change color scheme

Notes on codes, projects and everything

Slideshow using Scriptaculous

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

  1. The example slide 1
  2. The example slide 2
  1. Slide 1

    This is the description for the first slide

  2. 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.

leave your comment

name is required

email is required

have a blog?

This blog uses scripts to assist and automate comment moderation, and the author of this blog post does not hold responsibility in the content of posted comments. Please note that activities such as flaming, ungrounded accusations as well as spamming will not be entertained.

Comments

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

author
Jeffrey04
date
2008-07-22
time
05:45:54

I am having trouble getting your script to work, but had spent 4 hours trying to find something like it and it is exactly what I am looking for. I am having trouble getting the transition to work. Can you email me any thoughts. You can see the thing not working at http://www.ravennainteractive.com/new_site/portfolio.html

author
TJ
date
2008-07-3
time
00:43:18