-Back-

Slideshow (Animated)

JavaScript

Date Added: May 18, 2003

Platforms: NS: none - IE: all

Author: Bryan Gamble (bryan@bmgamble.com)

Homepage: bmgamble.com

Description: Good for photo albums with images with a smaller file size. Press a button to view photos in order.

Example:

The Code: Cut and paste this code by pressing "highlight all": <!------------------BEGIN HEAD----------------------------> <!-- To install: --> <!-- Place this into the HEAD of the HTML document: --> <!-- Make sure all images are in the same folder as this--> <!-- file. --> <!-- DO NOT TAKE THE FOLLOWING OUT OF THE CODE: --> <!--------------------------------------------------------> <!-- AUTHOR: Bryan Gamble --> <!-- PROGRAM: Animated Slide Show --> <!-- URL: www.bmgamble.com --> <!--------------------------------------------------------> <SCRIPT LANGUAGE="JavaScript"> <!-- // Create a bunch of off-screen images // EDIT TO HOW MANY IMAGES YOU HAVE var NUM_OF_IMAGES = 4; var img = new Array(NUM_OF_IMAGES); // CHANGE "4" TO HOW MANY IMAGES YOU HAVE for( var i = 0; i < NUM_OF_IMAGES; i++) { img[i] = new Image(); // EDIT ACCORDING TO WHERE YOUR IMAGES ARE LOCATED AND FILE EXTENSION img[i].src = "0" + i + "_img.gif"; } function animate() { document.animation.src = img[frame].src; frame = (frame + 1) % 10; // YOU CAN CHANGE THE "1300" TO A LONGER OR SHORTER DELAY timeout_id = setTimeout("animate()", 1300); if (frame == NUM_OF_IMAGES) frame = 0; } frame = 0; timeout_id = null; //--> </SCRIPT> <!--------------------END HEAD-----------------------------> Cut and paste this code by pressing "highlight all": <!------------------BEGIN BODY----------------------------> <!-- To install: --> <!-- Place this into the BODY of the HTML document: --> <!-- YOU CAN FIX THE WIDTH AND HEIGHT ACCORDINGLY --> <IMG SRC="00_img.gif" BORDER=1 ALT="Click to animate" NAME=animation> <FORM WRAP=virtual> <INPUT TYPE=button VALUE="Start Animation" onClick="if(timeout_id == null) animate();"> <INPUT TYPE=button VALUE="Stop Animation" onClick="if(timeout_id){ clearTimeout(timeout_id); timeout_id=null;}"> </FORM> <!--------------------END BODY----------------------------->

Notes: All images must be in the same directory for this to work. You can edit the code to make it work with .jpg files as well. This code makes use of a form and "onClick" functionality. When the user clicks on the button, the counter is incremented or decremented accordingly. The pictures wrap back around after the last image is shown so the counter doesn't try to call an image out in never-never land. If you have any problems installing this, please e-mail me at bryan_1978@yahoo.com. Make sure the images start with "0". For example if you have 3 images, they should be named "00_img.jpg", "01_img.jpg", and "02_img.jpg". To see how this script works, click the "start" button. The animation will continue until "stop" is clicked. Images can be of any size. preferably the smaller file size, the better this type of slide show will be. If images with a large file size are used, maybe the manual slide show would be better to use.

-Back-