May 2, 2007  

Tutorial: How to make Script.aculo.us Based Slideshow

Before you go on to read this article. If your a newbie to using Script.Aculo.us AJAX library, I would recommend my previous post on getting started with Script.Aculo.us.

Read the article here

Okay, so I presume that you have gone through the previous tutorial. In this tutorial we will see how to make a simple slideshow for our website. You can also download the script along with HTML file at the bottom of the tutorial.

Slideshow’s are pretty common among webstites today. But, most of them being in Flash. Since we can add the same beauty using AJAX I thought of giving it a shot.

So lets get started!!! Start Javascript functionality here!!!

<script type=”text/javascript”>

var slides = array(‘slide1′,’slide2′,’slide3’);      // we define a array with all the div-Id’s of the slides.

we have to define a variable “wait” so lets declare and assign some value to it.

var wait = 500;    // interval and time in milliseconds

1. We need the slideshow to start as soon as the site is launched.

For that we have to define a javascript function.

function start_slideshow() {

setInterval(SlideShow(), wait);  // This is a javascript function which acts as a timer.

}

Now, we need to define the actual functionality for the slideshow.

function SlideShow() {

Effect.Fade(Slides[i], { duration:1, from:1.0, to:0.0 });
i++;
if (i == 3) i = 0;
Effect.Appear(Slides[i], { duration:1, from:0.0, to:1.0 });

}

2. We have to add this to our html code.

<body onload=”start_slideshow()”>

3. Lets add some slides to the page.

<div id=”slideshow-content”>
<div class=”slide1″ id=”slide1″>
<h2>My First Slide</h2>
<p> Add some content for your first slide.
</p>
</div>                   // First slide div ends here
<div class=”slide2″ id=”slide2″ style=”display: none;”>
<h2>My Second Slide</h2>
<p> Add some content for your second slide.
</p>
</div>              // Second slide div ends here
</div>

Imp Note: Note how we must use an outer DIV tag to use this. Its a must to have an outer DIV tag.

Now, just put all the code in one place and you can see your slideshow working!!!!

If you have tried/ have any suggestions to improve it pls drop in comments.

Cheerz
Shri

PS:
1] Planning to write a tutorial on slideshows based on images with various control effects.
2] You can also download the code in attachments.

Download the tutorial and see it working

Download: slideshow.txt

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book at Packt official site

PHP and Script.aculo.us Book

PHP and Script.aculo.us Book


http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

About srinix

I am Sridhar, a matured nut, on this planet with water, air and love ;)

28 responses to “Tutorial: How to make Script.aculo.us Based Slideshow”

  1. Chris says :

    Thanks for this, really useful. I took your code and modified it to produce a “Single run” slideshow triggered from a button here: http://www.shepherdpics.com/test.html

    The only real problem I had was not noticing that the div needs to be absolutely positioned.

    Thanks
    Chris

    Reply
  2. srinix says :

    Hey Chris,

    Im so glad that you found the code useful.

    I checked the slideshow, its damn gud, seems like an animation of birds, but using our love AJAX!!!

    Cheerz
    Sridhar

    Reply
  3. Ben Nash says :

    Any help on how make a stop function?

    Then eventually a next and previous jump to button?

    thanks
    Ben

    Reply
  4. Bernd says :

    Hi, nice code 🙂
    but i have a error:
    element has no properties
    var oldOpacity = element.getInlineOpacity();

    Have you a idea?

    Best Regards

    Reply
  5. Andy says :

    Oh, and did not know about it. Thanks for the information …

    Reply
  6. spaniard says :

    Bernd said:
    “but i have a error:
    element has no properties
    var oldOpacity = element.getInlineOpacity();”

    I have the same error. Funny thing is, it just appeared. Thoughts on what could cause this? Any help would be appreciated.

    (Awesome script, btw. We used to do the same thing with Flash, now we can make things more dynamic.)

    Reply
  7. deepan says :

    nice yar,
    but have got some problem
    just the data are displayed
    and there i no effect over it

    Reply
  8. Enéas Gesing says :

    I’m having this error when using Efect.Move on my projects.

    Reply
  9. Torero says :

    var i must be into the SlideShow function to prevent the “element has no properties” error.

    Hasta luego Lucaass!!

    Reply
  10. Torero says :

    Hey moderator,

    Please replace my other post with this:

    The problem is i. Rename i to ii to prevent the error.

    Thanks

    Reply
  11. comspy says :

    Hey,

    Thank you very much for this code! It works perfectly! Exactly what I needed – it saved me some time! 🙂

    Reply
  12. Stevo says :

    Great script, thanks!

    One small problem. With each transition, the new picture is actually appearing below the visible one. Then, once the first picture has disappeared, the new picture shifts up to where the old picture used to be.

    Any ideas what I could be doing wrong?

    Thanks.

    Reply
  13. Brian says :

    Thanks for the tutorial! It was just what I needed.

    I noticed that before the slideshow goes through its first rotation that you can see the other images during the transitions. So as two photos fade, I see another image in the array during the fading.

    Is there any way to fix this?

    Reply
  14. zig says :

    I’m getting random “undefined” javascript errors in IE. I think it’s because the divs I’m using for the slide show are being loaded in via ajax and don’t initially exist when the javascript is being loaded into memory (not run.. just loaded). IE reads the page differently than most other browsers.

    You can see it here: https://jedi.tcnj.edu/portal/index.php

    Any ideas?

    Reply
  15. Samet Ugurlu says :

    hi all, i’m want next and previous button but cannot 😦 please help me!?!?!?!

    Reply
  16. dulconte says :

    Thanks it help me a lot : htp://dul.amsud.net well it’s quiet different at the end but without your example i should never get it.

    Reply
  17. mikel says :

    thank you for this tutorial

    Reply
  18. Elainne says :

    i’m getting the:

    element has no properties
    var oldOpacity = element.getInlineOpacity();

    error.
    Already tried defining ‘i’ and renaming it to ‘ii’ but no success.
    Ideas?

    Reply
  19. David says :

    Hi. Thanks for this script. Really good work. We’ve updated your script and you can see the results at:

    http://www.icommunicate.co.uk/articles/all/simple_slide_show_for_prototype_scriptaculous_38/

    Many thanks once again.

    David

    Reply
  20. nono says :

    i have made beautiful baby slideshow and easter decoration slideshow,easy with psp make photo to dvd slideshow with music

    Reply
  21. nono says :

    i have made beautiful baby slideshow and easter decoration slideshow,easy with psp make photo to dvd slideshow with music

    Reply
  22. womble says :

    Is there any way to make it fade in on the first slide?

    Reply
  23. doogerman says :

    thanks for the tutorial!
    i have one query, however.
    how can you make it stay on the last slide for a little while before going back to the first slide?
    thanks again!

    Reply
  24. Windows says :

    great post save up the great work.

    Reply

Leave a reply to nono Cancel reply