Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: SlideShow class

  1. #1
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts

    SlideShow class

    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.
    Code:
    /*****************************************************************
    
        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 );
        }
    }
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #2
    New to the CF scene
    Join Date
    Jan 2003
    Location
    hmmm...dunno
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •