SK Backend | JavaScript

< BACK | NEXT >

SLIDE LABEL

Source/Downloads

SlideShow v 3: This template demonstrates the most recent version of our annotated sequential slideshow (SlideShow v 3). In addition to the standard image swap utitlity, the slideshow's core swap method now includes an integrated, optional DOM enabled dynamic label function.

Note that while the label function will fail in non-DOM enabled browsers, it will do so gracefully and the image swap portion of the script will continue to function in most browsers

The template can be configured to run a new slideshow from a simple image list in a matter of minutes, and anyone conversant in basic HTML can add or edit non-dynamic elements in the template as well as restyle the overall look of the page.

Because there is always another way to do it, two additional versions of the slidshow can be found here: Slideshow2.html (image only) and here: Slideshow1.html (cross browser)

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

/*

These scripts enable an annotated sequential
slideshow by adding a DOM enabled dynamic
label to the standard image swap method. 

*/

/* start user editable */

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

// SLIDSHOW 3: USELABELS (true | false)    
var uselabels=true;

/* end user editable */

// SLIDSHOW 3: INITIALIZE COUNTER    
var counter=0;

// SLIDSHOW 3: USE PAGINATION (false)
var pagination=false;

// SLIDSHOW 3: INITIALIZE COUNTER    
var counter=0;

// SLIDSHOW 3: USE PAGINATION (false)
var pagination=false;

// SLIDESHOW 3: SWAP IMAGE
function SwapImage(name,source) {
    document.images[name].src=source;
    return false;
    }

// SLIDESHOW 3: SWAP LABEL
function SwapLabel(id,text) {    
    if(document.getElementById) {
        element=document.getElementById(id);
        element.innerHTML=text;
        }
    return false;
    }

// SLIDESHOW 3: TOGGLE IMG COUNTER
function ToggleCounter(t){
    if(document.getElementById){
        for(i=0;i<imagelist.length;i++) {
            link=document.getElementById("i"+i);            
            link.className=(i==t)? 'dead' : 'blu';
            }
        }
    }

// SLIDESHOW 3: SHOW IMAGE

function ShowImage(c) {
    counter=c;
    SwapImage("slide",imagelist[c]);
    if(uselabels) SwapLabel("label",labellist[c]);
    if(pagination) ToggleCounter(c);
    }

// SLIDESHOW 3: NEXT IMAGE
function NextImage() {
    ShowImage(((counter<imagelist.length-1)?counter+1:0));
    }

// SLIDESHOW 3: BACK IMAGE
function BackImage() {
    ShowImage(((counter>0)?counter-1:imagelist.length-1));
    }

// SLIDESHOW 3:  CONTROL BAR
ControlBar=function (list1,list2) {
    var controlbar="<a href=\"javascript:BackImage()\" class=blu>&lt;<\/a>";
    for(i=0;i<list1.length;i++) {
        controlbar+="&nbsp;<a href=\""+list1[i]+"\"" +
           " title=\""+list2[i]+"\"" +
           " onclick=\"javascript:ShowImage("+i+");return false;\" +
           " id=\"i"+i+"\" class=blu>"+(i+1)+"<\/a>&nbsp;";
        }
    controlbar+="<a href=\"javascript:NextImage()\" class=blu>&gt;<\/a>";
    pagination=true;
    return controlbar;
    }

-->
</script>
</head>
<! INITIALIZE IMAGE & LABEL ONLOAD-->
<body onload="ShowImage(0)">

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


<!-- OPTIONAL: PAGINATED CONTROL/COUNTER -->
<p align=center id=controlbar>
<script type="text/javascript">
	document.write(ControlBar(imagelist,labellist));
</script>
</p>
<!-- OPTIONAL: PAGINATED CONTROL/COUNTER -->


<p align=center>

<!-- BACK VCR CONTROL -->
<a href="javascript:BackImage()">&lt;</a>

BACK | NEXT

<!-- NEXT VCR CONTROL -->
<a href="javascript:NextImage()">&gt;</a>

</p>

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

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

</body>