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 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