SophiaKnows > Codebase > JavaScript

[ +/- ]

SLIDE LABEL

Source/Downloads

In General: This template enables an automated (self-advancing) sequential slideshow including an optional DOM enabled automated label function.

Note that the label function will gracefully fail in non-DOM compliant browsers. However, the image swap portion of the script will continue to function in NS 2+/IE 3+ browsers

<head>
<script type='text/javascript'>
<!--
/* --------------------------------- */
/*     SOPHIAKNOWS: JAVASCRIPT       */
/* --------------------------------- */
/*       SLIDEDSHOW: AUTORUN         */
/* --------------------------------- */
/*  Created:  2002-01-15             */
/*  Issued:   2002-01-15             */
/*  Modified: 2004-12-17             */
/*  Copyright (c) 2001-2004          */
/*  Tony Pisarra, SophiaKnows        */
/* --------------------------------- */
/* --------------------------------- */

/*

This template enables an annotated sequential
slideshow w/ a timer based auto-advance 
feature

Note that the label function will fail/break
in non-DOM compliant browsers. However, the
image swap portion of the script will continue
to function in NS 2+/IE 3+ browsers

*/
// LIST OF IMAGES (named slides)
var slides=new Array(
   "../images/slides/tarptent.jpg",
   "../images/slides/stile.jpg",
   "../images/slides/dalton-diner.jpg",
   "../images/slides/potatoman.jpg"
   )
// LIST OF LABELS (named labels)
var labels=new Array(
   "TarpTent, Night 1",
   "Stile In PA",
   "Hikers Eat Breakfast",
   "Potato Man At Rest"
   )

// SET INTERVAL (MILLISECONDS)
var interval=2000;

//   ENABLE/DISABLE LABELS (true | false)
var uselabels=true;

// INITIALIZE COUNTER   
var counter=-1;

// INITIALIZE RUN STATUS  
var status=1;

// TOGGLE RUN STATUS
function ToggleMode() {
   status=((status)?0:1);
   }

// AUTORUN
function AutoRun() {
   if(status) { NextImage();}
   setTimeout('AutoRun()',interval);
   }

// IMAGE SWITCH
function SwapImage(theName,theSource) {
   document.images[theName].src=theSource;
   }

// LABEL SWITCH
function SwapLabel(labelName,labelText) {
   if (document.getElementById) {
      document.getElementById(labelName).childNodes[0].nodeValue=labelText;
      }
   }   
// NEXT IMAGE
function NextImage() {
   counter=((counter<slides.length-1)?counter+1:0);
   SwapImage("slide",slides[counter]);
   if(uselabels) { SwapLabel("label",labels[counter]); }
   }


-->
</script>
</head>
<! INITIALIZE AUTORUN -->
<body onload="AutoRun()">

<h2 align=center>Slide Show</h2>

<!-- START/STOP -->
<p align=center>
<a href="javascript:ToggleMode()">start | stop</a>
</p>

<!-- THE IMAGE (NAMED SLIDE) -->
<p align=center>
<img src=../images/slides/blank.jpg name=slide>
</p>

<!-- THE IMAGE (ID'D LABEL) -->
<p align=center ID=label>
SLIDE LABEL
</p>

</body>

Getting Started: The application includes two groups of scripts: (1) a set of generic drivers found in autoslide.js and (2) a set of user defined values, unique to the slideshow.

The drivers can either be cut-n-pasted into the head of the document hosting the slideshow or accessed in a javascript source file .js via a set of <script> tags

<script type='text/javascript' src='rollover.js'></script>

The user defined values should be pasted between script tags in the head of the document hosting the slideshow:

<script type='text/javascript'>
<!--
var slides=new Array([images]);
var labels=new Array([labels]);
var uselabels=false;
var interval=2000;
-->
</script>

Here is a quick explantion of these values and how they are to be configured

slides: The variable slides is an array (list) used to store a list of image source file locations to be used in the animation.

Images are added to the array in the order in which they should appear in the animation, enclosed by quotation marks ("") and separated by commas (,)

var slides=new Array("images/gif1.gif","images/gif2.gif","images/gif3.gif");

labels: The variable labels is an array (list) used to store a list of descriptive labels associated with the images to be used in the animation.

Labels are added to the array in the order in which they should appear in the animation, enclosed by quotation marks ("") and separated by commas (,)

var labels=new Array("Label 1","Label 2","Label 3");

uselabels: The variable uselabels is boolean value that tells the drivers whether or not this version of the application will use the label feature (true | false).

var uselabels=true; // will use label feature

var uselabels=false; // will not use label feature

interval: The variable interval is a number representing the number of milliseconds each image in the animation should hold the frame before the auto-advance routine is called.

The HTML

An HTML page hosting the animation includes at least: a body tag (calling the animation onload), an intial image (with the HTML NAME "slide") and a structural element to recieve the label (with the HTML ID "label")

<! INITIALIZE AUTORUN -->
<body onload="AutoRun()">

<!-- THE IMAGE (NAMED SLIDE) -->
<p align=center>
<img src=../images/slides/blank.jpg name=slide>
</p>

<!-- THE LABEL (ID'D LABEL) -->
<p align=center ID=label>
SLIDE LABEL
</p>

The HTML may also include a control (in this example an anchor link) calling a function named ToggleMode() which allows the viewer to stop and start the anitmation:

<a href="javascript:ToggleMode()">+/-</a>

Selecting the mode control will stop a running animation. Selecting the mode control again will restart a paused animation.