SlideShow class

[beetle]

Well, this has been in bits and stages of completion for a while now, so I sat down today and finished it, adding a few more features.

Some of you will understand all of this, some of you will not. The demo page (http://www.peterbailey.net/slideshow) gives examples of most of the features in one way or another. There isn't much documentation yet, but it will be at the same web address when I get it done.

Comments/suggestions welcome./*****************************************************************

SlideShow javascript class by Peter Bailey - Copyright (c) 2003
Contact: me@peterbailey.net
Website: http://www.peterbailey.net/slideshow/

Main Features:
- OO design means low namespace consumption and allows for
multiple SlideShow instances per page
- Auto-creation of SELECT navigation widget
- Can preload images (but doesn't have to)
- Toggle start/end looping
- Slideshow data can be used between shows

Compatibility:
- Tested on IE6 and Mozilla 1.1
- DOM compliant browsers only

Note: This document was created with a tab-spacing of four (4)

******************************************************************/

function SlideShow( imgId, capId, stsId, root, data, pre, loop )
{
this.img = document.images[imgId];
this.cap = ( capId != '' );
this.sts = ( stsId != '' );
this.root = root;
this.slide = 0;
this.data = window[data];
this.pre = pre;
this.loop = loop;

if ( this.cap ) this.capObj = document.getElementById( capId );
if ( this.sts ) this.stsObj = document.getElementById( stsId );
if ( this.pre ) this.preload();
else this.imgsDone = true;

this.img.src = "/images/blank.gif";
if ( this.capObj ) this.capObj.firstChild.nodeValue = "Loading";
this.go(1);
}

SlideShow.prototype.preload = function()
{
var o = this;
this.img.setAttribute( "alt", "Preloading Images...Please Wait" );
this.imgs = new Array();
for ( var i = 0, l = this.data.length; i < l; i++ )
{
this.imgs[i] = new Image();
this.imgs[i].src = this.root + this.data[i][0];
}
this.imgs[--i].onload = function ()
{
o.img.setAttribute( "alt", o.data[o.slide][1] );
o.imgsDone = true;
}
}

SlideShow.prototype.next = function()
{
this.go('next');
}

SlideShow.prototype.prev = function()
{
this.go('prev');
}

SlideShow.prototype.go = function( v )
{
switch ( v )
{
case 'prev':
case 'back':
this.slide--; break;
case 'next':
case 'foward':
this.slide++; break;
default:
this.slide = v - 1;
}
if ( this.slide == -1 ) // Loop from beginning to end
this.slide = ( this.loop ) ? parseInt( this.data.length - 1 ) : 0;
if ( this.slide == this.data.length ) // Loop from end to beginning
this.slide = ( this.loop ) ? 0 : this.slide = this.data.length - 1;

this.img.src = ( this.pre ) ? this.imgs[this.slide].src : this.root + this.data[this.slide][0];
if (this.imgsDone) this.img.setAttribute( "alt", this.data[this.slide][1] );
if (this.cap) this.capObj.firstChild.nodeValue = this.data[this.slide][1];
if (this.sts) this.stsObj.firstChild.nodeValue = "Slide " + ( this.slide + 1 ) + " of " + this.data.length;
if (this.sel) this.sel.selectedIndex = this.slide;
}

SlideShow.prototype.makeSelect = function( containerId, useCaps )
{
var ssObj = this;
var s = document.createElement( "select" );
this.sel = document.getElementById( containerId ).appendChild( s );
if ( document.all )
this.sel.attachEvent( "onchange", function () { changeHandler( event.srcElement, ssObj ) } );
else
this.sel.addEventListener( "change", function ( e ) { changeHandler( e.target, ssObj ) }, false );
this.addOptions( useCaps );

function changeHandler( sel, ss )
{
ss.go( parseInt( sel.options[sel.selectedIndex].value ) + 1 );
}
}

SlideShow.prototype.addOptions = function( useCaps )
{
var o;
for ( var i = 0, len = this.data.length; i < len; i++ )
{
o = document.createElement( "option" );
t = document.createTextNode( ( useCaps ) ? this.data[i][1] : "Picture " + ( i + 1 ) );
o.setAttribute( "value", i );
o.appendChild( t );
this.sel.appendChild( o );
}
}

[acmelab3]

hello,
i am totally and completely new to javascript. but...i need the first image scroll thingy you have goin'. could you possibly give the script for just that one image scroller thingy(the first one)? thnx...it would be much appreciated. :)
acmelab