SK Backend | JavaScript Basics

Source/Downloads

SlideShow v2: This template demonstrates a sequential, image-only slideshow powered by a standard image swap method.

While it lacks the dynamic labels found in our current default template, this version is very well behaved in pretty much every post NN4 browser and can be configured in minutes.

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

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

/*

This template enables a basic image-
only sequential slideshow. 

*/

// LIST OF IMAGES
var imagelist=new Array(
   "../images/slides/tarptent.jpg",
   "../images/slides/stile.jpg",
   "../images/slides/dalton-diner.jpg",
   "../images/slides/potatoman.jpg"
   )
// INITIALIZE COUNTER   
var counter=0;
// IMAGE SWITCH
function SwapImage(theName,theSource) {
   document.images[theName].src=theSource;
   }
// NEXT IMAGE
function NextImage() {
   counter=((counter<imagelist.length-1)?counter+1:0);
   SwapImage("slide",imagelist[counter]);
   }
// BACK IMAGE
function BackImage() {
   counter=((counter>0)?counter-1:imagelist.length-1);
   SwapImage("slide",imagelist[counter]);
   }
-->
</script>
</head>
<!-- INITIALIZE IMAGE ONLOAD -->
<body onload="SwapImage('slide',imagelist[0]);">
<p align=center>
<!-- BACK VCR CONTROL -->
<a href="javascript:BackImage()">&lt; BACK</a>

 | 

<!-- NEXT VCR CONTROL -->
<a href="javascript:NextImage()">NEXT &gt;</a>
</p>
<p align=center>
<!-- THE IMAGE (NAMED SLIDE) -->
<img src=images/blank.gif name=slide>
</p>
</body>