Javascript Slideshow

Today I was asked how, given a bundle of still images, I would turn them into a movie using javascript. I figured there were two primary routes: I could use a canvas and use the .drawImage() method to draw each image to the canvas in turn, or, I could just use a single image and change the src.

So, I decided to go the image route. Along with the animation of the images, the other asks were for a Play/Pause button, a Stop (that would reset to the first image), an adjustable frame rate, and a ‘jump to frame’ option.

I began putting all of the images in an array, the idea being that I’d have a function that would change the image, and each time, would increment some counter, so that the next time the function fired, we’d get the next frame. I’d also need some on/off variable that the play/pause button would alter. Here was the beginning:

<body onload="launch()">
</body>
<script>
var frames=['frame1.png','frame2.png','frame3.png','frame4.png','frame5.png','frame6.png','frame7.png','frame8.png','frame9.png','frame10.png'];
var playing=true;
var on_frame=0;
var timer;

function launch(){
document.body.innerHTML='<img id="film" src="frames/'+frames[on_frame]+'"/><br/><button id="actionbutton">Play</button><button onclick="stop()">Stop</button><br/>Milliseconds between frames:<input type="text" id="framerate" value="50"/><br/>Go to frame:<input type="text" id="gotoframe"><button onclick="goFrame(document.getElementById(\'gotoframe\').value);">Go</button>';
document.getElementById('actionbutton').addEventListener('click',play);
play();
}

Oh, you’ll see I use image and frame interchangeably as I describe things. If you think of the difference between a movie and a slideshow, it’s really just how much time lapses between images…for a movie, it’s milliseconds, for a slideshow, probably a few seconds.

So then I worked on the function to change the image:

function change(){
document.getElementById('film').src='http://www.robotwoods.com/images/blog/frames/'+frames[on_frame]; //I have my images in a folder named frames
on_frame++;
if(on_frame==frames.length){on_frame=0;}
if(playing){
timer=setTimeout(change,document.getElementById('framerate').value?document.getElementById('framerate').value:50);
}
}

and the controls:

function play(){
document.getElementById('actionbutton').removeEventListener('click',play);
document.getElementById('actionbutton').addEventListener('click',pause);
document.getElementById('actionbutton').innerHTML='Pause';
clearInterval(timer);
playing=true;
change();
}

function pause(){
document.getElementById('actionbutton').removeEventListener('click',pause);
document.getElementById('actionbutton').addEventListener('click',play);
document.getElementById('actionbutton').innerHTML='Play';
playing=false;

}

function stop(){
document.getElementById('actionbutton').removeEventListener('click',pause);
document.getElementById('actionbutton').addEventListener('click',play);
document.getElementById('actionbutton').innerHTML='Play';
playing=false;
on_frame=0;
}

function goFrame(x){
if((x>-1)&&(x<=frames.length)){
on_frame=x;
if(!playing){document.getElementById('film').src='http://www.robotwoods.com/images/blog/frames/'+frames[on_frame];}
}
else{
alert('Out of range');
}
}

And that was that (and here it is)…one can drop in your image names (and adjust the path accordingly), and then set the time you want for rotation [in reality you’d probably find the time you liked and then hardcode that in (and remove the input box)…but I had the sense the requester hadn’t seen their images animated, so wouldn’t have a value in mind for that at the onset.

From a performance perspective this can’t compete with an actual converted movie (and you’ll see that it takes a moment to get the images cached before it becomes a fluid cycle, though this doesn’t happen when viewed locally), but it is a pretty straightforward way to add some dynamism to a page.

What are some creative examples you’ve seen of image swapping or non-movie animations?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>