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
http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book
26 comments so far
Leave a reply
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
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
When the web page loads, is it possible to make the first slide fade in ?
Any help on how make a stop function?
Then eventually a next and previous jump to button?
thanks
Ben
Hi, nice code
but i have a error:
element has no properties
var oldOpacity = element.getInlineOpacity();
Have you a idea?
Best Regards
Oh, and did not know about it. Thanks for the information …
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.)
nice yar,
but have got some problem
just the data are displayed
and there i no effect over it
I’m having this error when using Efect.Move on my projects.
var i must be into the SlideShow function to prevent the “element has no properties” error.
Hasta luego Lucaass!!
Hey moderator,
Please replace my other post with this:
The problem is i. Rename i to ii to prevent the error.
Thanks
Hey,
Thank you very much for this code! It works perfectly! Exactly what I needed – it saved me some time!
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.
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?
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?
hi all, i’m want next and previous button but cannot
please help me!?!?!?!
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.
[...] pour comprendre la fonctionnement de ce script et de ses effets. Par chance je suis tombé sur ce blog, qui m’a entraîné vers ce site. C’était exactement ce que je cherchais ! Bon [...]
thank you for this tutorial
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?
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
[...] nach einer einfachen Slideshow zur Animation unseres Bilderrahmens, bin ich über die Seite von Sridhar gestolpert. Es gibt zwar zig Plugins für WordPress, aber entweder waren mir diese zu [...]
[...] einfachen Slideshow zur Animation des Bilderrahmens auf schockklub.de, bin ich über die Seite von Sridhar gestolpert. Es gibt zwar zig Plugins für WordPress, aber entweder waren mir diese zu umfangreich [...]
i have made beautiful baby slideshow and easter decoration slideshow,easy with psp make photo to dvd slideshow with music
i have made beautiful baby slideshow and easter decoration slideshow,easy with psp make photo to dvd slideshow with music
Is there any way to make it fade in on the first slide?