web(cslai)

Findings and Notes in Web Development

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.

2 Comments

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

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

Leave Message

Personal Details

Toggle Extra

© 如无特别著名,本站的所有著作权归作者Jeffrey04以署名-非商业性使用-相同方式共享许可证发布。

本网志是由Wordpress荣誉呈现,站点界面SimKite设计归设计者Jeffrey04所有。

由于本站采用即时刊登留言者的留言,所以无法也不能完全监察所有的留言,站长Jeffrey04保留删除和不删除留言之权力。欢迎网友发表具建设性,负责任兼且合法之言论,否则已经发现立即删除而不另行通知。倘若网友发现留言出现问题请留言提出,本站保留一切法律权力。