Slideshow Using Prototype and Scriptaculous

10/06/20096 responses, 1910 views

Prototype is a JavaScript Framework that aims to ease development of dynamic web applications. Script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly. We can create a simple image slide show with Prototype and Sciprtaculous effect working together.

Loading Prototype and Scriptaculous using JsLoad

JsLoad is simple API which we can use to import JavaScript library from Google server. In this example we need to call both Prototype and Scriptaculous by adding this code below on our <head></head> section of our web page.

<script src="http://jsload.net/init"></script>

Javascript Function: Slideshow()

Now we have to load the prototype and scriptaculous effect and then add the slideshow() function which will be used to run our slideshow image. Add the code below on your <head></head> section after the first code above.

<script type="text/javascript">
// JsLoad function to load Prototype and Scriptaculous
JsLoad("scriptaculous", "1.8.0");

 // Slideshow function
function slideshow(start,last,interval) {
  var frame = start;
  var nextframe = start+1;
  Effect.Appear('img1',{duration:.5,from:0.0,to:1.0});
    setInterval(function() {
    Effect.Fade('img'+frame,{duration:.5,from:1.0,to:0.0,afterFinish:function(){
    $('img'+frame).hide();
    Effect.Appear('img'+nextframe,{duration:.5,from:0.0,to:1.0});
    frame = nextframe;
    nextframe = (frame == last) ? start : nextframe+1;
    }});
 },interval);
 return;
};
</script>

In the <body></body> section somewhere on your page, add a XHTML code to show your images. Check this code for example.

<img id="img1" style="display: none;" src="image-1.png" alt="" />
<img id="img2" style="display: none;" src="image-2.png" alt="" />
<img id="img3" style="display: none;" src="image-3.png" alt="" />

Note the ID which is written as img1,img2 and img3. These are important to run the slideshow. You can add more image, but remember to name it the same way such as img4, img5 and furthermore. After the above code, call the javascript function slideshow(start,end,interval) where start is the first image, end is the last image, and interval is the interval time before the image slides.

<script type="text/javascript">slideshow(1,3,5000);</script>

Posted by Arie Putranto

Filed under Web Design

Tagged: Javascript, Prototype, Script, Scriptaculous, Slideshow, , Tutorial

Subscribe : Entries (RSS), Comment (RSS), Trackback to this post

6 comments on "Slideshow Using Prototype and Scriptaculous"
Leave a Response