Animated (Slideshow) Images (jpg, png, gif)

Instead of adding a lot of markup to a page, or using animated gif (big files), this script allows use of individual image files (jpg, png, etc) files to create an animated image. The script could also work as a slideshow: It uses CSS3 style 'opacity' to optionally fade between images; and can also (optionally) limit the number of repetitions.

This version is v2.1. All the files used in this page are in bzip format or gzip format. The only file you need from this to animate images is the javascript file animR2.js

Download the most recent version, or other scripts by eightize from the scripts page.

Overview: Your image is placed in the html normally, and linked to the other images by a script call. It only preloads one image at a time. The advantage is that pages load faster than scripts that preload all images. The disadvantage is that if it's a slow connection, the images may load slower than the animation, so the animation will be forced to slow down. Also, some 'smart' phones redraw the whole page each time an image is loaded.

To set up script:

  1. Insert an image to be animated into the html markup.
  2. Assign the image an unique id. I recommend using the id attribute, but it also works with the name attribute:
    <img src="gifs/icon01.jpg" alt="fast animation example" id="roll1" height="65" width="65">
  3. Paste the following at the end of the page before the close </body> tag:
    <script type="text/javascript" src="animR2.js"></script>
    <script type="text/javascript"><!--
    //  Pass this information for each animation:
    //   setupAnim(seconds between images,name of image,Array(list of images)[,fade percentage[,number of repetitions]])
    //  (the image written into the page is _not_ included in the list of images)
    setupAnim(time,id,Array(comma separated list of image paths),fade,repeats)
    // -->
  4. The first line attaches the script 'animR2.js'. If you prefer, you could put this in the head of the document. I prefer it at the end so the page can load sooner. Just make sure to get the path to the script correct:
    <script type="text/javascript" src="animR2.js"></script>
  5. For each animated image on the page, add a call to setupAnim(). This is the line hilighted in bold above.
    The parameters for the function are:
    1. time : Enter the amount of time in seconds for each image,
    2. id : The id you assigned to the image (ie, 'roll1' in the example step 2 above), and
    3. an array containing paths to each animated image.
    4. Optional additional parameters are
      fade : Enter the fraction of time that the image should be fading between images: 0 (don't fade) to 1 (fade the whole time),
    5. repeats : The number of repetitions (zero means unlimited).


    The following example would show each image for three seconds, use five additional images for six total images, and fade between the images for the last 0.25*3 seconds.

  6. Optional: If using this for a slideshow, it's nice to have buttons for forward, back and pause. To do this, attach onclick events to the buttons/links:
    For the forward button: onclick='return animFwd("image id")'
    For the backward button: onclick='return animBack("image id")'
    For the pause button: onclick='return animPause("image id",this)' note that the second parameter is the exact text this.
    The script adds the class "paused" to the pause button when the image is paused, so its style can be changed.
    <a onclick='return animBack("roll2")'>Back</a>
    <a onclick='return animPause("roll2",this)'>Pause</a>
    <a onclick='return animFwd("roll2")'>Forward</a>

Example Animations

this is the first animation and it's really fast...

fast animation example

...and this is the second one

It's slower and fades between images. The links below the image demonstrate forward, pause and backward links. I've just added a border underneath the pause link using the style .paused {border-bottom:1px solid}

slow animation example

Back Pause Forward

Known Issues

The test page shows some limitations of the script.

If the document reflows, or the image position changes, the fading preload may be left behind.
The script absolutely positions the next image in front of the animated image by adding 1 to its z-index, and gets its offset location. I update the position only when the window onresize event fires. You may need to call setPrePos() if javascript changes the document layout.
If you apply styles such as border width, padding, and margin directly to an image that will use cross-fading, then you need to either also apply it to the crossfade image, or set forceImgSize = true in the script.
The crossfade image id is the same as the image, with _b appended to the end.
If an image that uses cross fading is scaled with relative units, the script may not calculate the position or size of the cross-fade image properly
Try changing forceImgSize = true in the script. If that doesn't work, you'll need to style the cross-fade image directly. Its ID is the image id with _b appended to the end.
This script barely works with ie6.
Recommend only using for slow animations with ie6, because it does not hold the images in memory. Also, the fading routine shows occasional flashes of the previous image because of the preloading problem.