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 templates enables an automated 
annotated, sequential slideshow by 
adding a timer controlled auto-advance
feature and DOM enabled dynamic labels 
to a standard image swap method. 

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
var images=new Array(
   "../images/slides/tarptent.jpg",
   "../images/slides/stile.jpg",
   "../images/slides/dalton-diner.jpg",
   "../images/slides/potatoman.jpg"
   )
// LIST OF 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<images.length-1)?counter+1:0);
   SwapImage("slide",images[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 images=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

images: The variable images 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 images=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;
var uselabels=false;

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>