Greg Amer

Images

 slide show

i-3
JavaScript:
gascripts.com image swapping techniques can be incorporated with an image tracking mechanism to create a slide show.

 

Hard Reload
To See Menu

slide:

Cookie Magic Presentation



Each slide in this show is displayed in the same position. The text object in the upper right corner of the display, shows the slide number that is currently being viewed.

H
I
N
T

By arranging images in an Array, it is possible to track which image object is being displayed. This enables navigation through a series of images. This technique is especially useful for kiosks.

How Does it Work?

<script language="JavaScript">
<!--
i = 0

 Slide Show
initialize i as the global counter, used to track the last position viewed in the slide array.

slide = new Array(4)

slide[0] = new Image(320,240)
slide[0].src = "image/img001.jpg"
slide[1] = new Image(320,240)
slide[1].src = "image/img002.jpg"
slide[2] = new Image(320,240)
slide[2].src = "image/img003.jpg"
slide[3] = new Image(320,240)
slide[3].src = "image/img004.jpg"

 The array slide preloads the images used in the slide show. Defines the properties size (320,240), and src.       

function slideUpdate(i) { return i; }

 Each navigation function reports its destination to slideUpdate before performing any action.slideUpdate records the destination to track position.
  

function slideFirst() {
slideUpdate(i = 0);
document.show.src = slide[i].src
document.directory.box.value = i + 1}

 slideFirst resets the slide show to the first slide.   

function slideNext() {
slideUpdate(i++);
if ( i > 3 ) { i = 0; }
document.show.src = slide[i].src
document.directory.box.value = i + 1 }

 slideNext advances the slide forward. An internal reset is required if ( i > 3 ) to verify that i is within the bounds of the slide array index. If the condition is met, i is reset to zero.

function slidePrev() {
slideUpdate(i--);
if ( i < 0 ) { i = 3; }
document.show.src = slide[i].src
document.directory.box.value = i + 1 }

 slidePrev reverses the slide backward. An internal reset is required if ( i < 0 ) to verify that i is within the bounds of the slide array index. If the condition is met, i is reset to three.

function slideLast() {
slideUpdate(i = 3);
document.show.src = slide[i].src
document.directory.box.value = i + 1 }
//-->
</script>

 slideLast advances the slide show to the last slide.

N
O
T
E

The two internal slide resets don't actually report to  slideUpdate nor do they need to. For example, suppose slideNext reports i++ and slideUpdate returns i=4 requiring a reset. If slideNext reports again, it's own i resets the global  i. If instead, slidePrev reports i--, slideUpdate will return i=3.   

 
  [back]   [home]  The End.