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 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Jul 2006
    Location
    Cape Town, South Africa
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy How do use this image swapping code repeatedly in the same page?

    I am new to web design and javascript even more so. I have a cut and paste script which rotates a series of images. It works just fine on its own.When i use it for multiple places on the same page, each to display it's own series of images, the best i can do is get all seven boxes displaying the same series of images and all working to only one timer.
    I have mixed and matched, varied and altered this code to try and get it to work. I need to somehow seperate them.I also want to store the code between the <head></head> in a seperate .jss.
    The fixes for similar problems experianced by other people i've seen are custom made, but i dont know enough to apply them here.
    Should i use a different code all together?

    Its time to bring out the big guns!!
    Pls, someone help me.

    Thank you.

    <script type="text/JavaScript">
    <head>
    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }

    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }

    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }

    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }

    var imgs = new Array('sample1.jpg','sample2.jpg','sample3.jpg');
    var delay = 4000;
    var counter = 0;

    function preloadImgs(){
    for(var i=0;i<imgs.length;i++){
    MM_preloadImages(imgs[i]);
    }
    }

    function randomImages(){
    if(counter == (imgs.length)){
    counter = 0;
    }
    MM_swapImage('rotator', '', imgs[counter++]);
    setTimeout('randomImages()', delay);
    }

    </script>

    </head>

    <body onload="preloadImgs();randomImages();">


    <td><img src="sample1.jpg" name="rotator" id="rotator" /></td>



    p.s my browser is i.e

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    // Simple Slide Show OOP (27-July-2006)
    // by Vic Phillips   http://www.vicsjavascripts.org.uk
    
    // A Simple Slide Show utilising Object Orientated Technics
    // allow as many applications as required to have independent functionality.
    // Images are defied in the HTML Code and may be optionally randomised.
    // Controls allow the display of a specific, next, previous image
    // or images automatically sequenced.
    
    
    
    // ***** The HTML Code
    //
    // Each Slide Show is defined in the HTML Code
    // e.g.
    // <div id="TstSS1" style="position:relative;width:100px;height:50px;" >
    // <img src="One.gif" width="100" height="50" >
    // <img  src="Two.gif" width="100" height="50" >
    // <img  src="Three.gif" width="100" height="50" >
    // </div>
    // The parent <DIV> must be  assigned a unique ID name
    // and must have a positional style of 'position:relative;' or 'position:absolute;'
    // The images may have a style of 'position:absolute;', this will be forced during initialisation.
    
    
    
    // ***** Initialisation
    // Each Slide Show must be initialised from a <BODY> or window onload event
    // e.g.
    // <body onload="zxcOOPSlideShow('fred','',2000,2);">
    // where
    // parameter 0 = the unique ID name of the Slide Show parent node.                   (string)
    // parameter 1 = the mode, 'A' = auto rotate on loading, 'R' = randomise images.     (string '', 'A', 'R' or 'RA')
    // parameter 2 = the auto rotate delay between images in milliSeconds(default 1000). (digits)
    // parameter 3 = the start image, starting from 1(default 1).                        (digits)
    
    
    
    // ***** The Controls
    //
    // The Slide Shows may be controlled by an event call to function 'zxcSSImg'
    // e.g.
    // <input type="button" name="" value="Next" onclick="zxcSSImg('TstSS1',1)">
    // <input type="button" name="" value="Auto" onclick="zxcSSImg('TstSS1')">
    // <input type="button" name="" value="Last" onclick="zxcSSImg('TstSS1',-1)"><br>
    // <img src="One.gif" width="25" height="13" onclick="zxcSSImg('TstSS1',0,1)" >
    // where:
    // parameter 0 = the unique ID name of the Slide Show parent node.                   (string)
    // parameter 1 = the mode 1 = next image, -1 = previous image, 0 = auto sequence.    (digits)
    // parameter 2 = (optional) over rides parameter 2, the image number to display.     (omit or digits)
    
    // ***** General
    //
    // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts
    // These character are easily changed to characters of choice using global find and replace.
    //
    // The Functional Code(about 2K) is best as an External JavaScript.
    //
    // Tested with IE6 and Mozilla FireFox
    //
    
    
    // **** Functional Code - NO NEED to Change
    
    function zxcSSImg(zxcid,zxcd,zxcnu){
     var zxcoop=window['zxcSS'+zxcid];
     if (!window['zxcSS'+zxcid]){ return; }
     clearTimeout(zxcoop.to);
     if (zxcnu){ if (zxcnu<1||zxcnu>=zxcoop.imgary.length){ return; }; zxcoop.cnt=zxcnu-1; zxcoop.d=0; zxcoop.next(); }
     else if (zxcd==1||zxcd==-1){ zxcoop.d=zxcd; zxcoop.next(); }
     else if (!zxcnu) { zxcoop.auto(); }
    }
    
    function zxcOOPSlideShow(zxcid,zxcmd,zxcdly,zxcfirst){
     if (window['zxcSS'+zxcid]){ return; }
     window['zxcSS'+zxcid]=new zxcSSOOP(zxcid,zxcmd,zxcdly,zxcfirst);
    }
    
    function zxcSSOOP(zxcid,zxcmd,zxcdly,zxcfirst){
     var zxcp=document.getElementById(zxcid);
     var zxcimgs=zxcp.getElementsByTagName('IMG');
     if (!zxcimgs){ return; }
     this.imgary=[];
     for (var zxc0=0;zxc0<zxcimgs.length;zxc0++){ zxcSSStyle(zxcimgs[zxc0],{position:'absolute',zIndex:'0',left:'0px',top:'0px'}); this.imgary.push(zxcimgs[zxc0]); }
     if (zxcmd.match('R')){ this.imgary=this.imgary.randomise(); }
     this.ref='zxcSS'+zxcid;
     window[this.ref]=this;
     this.to=null
     this.dly=zxcdly||1000;
     this.d=1;
     this.cnt=zxcfirst||1;
     this.cnt--;
     this.lst=zxcimgs[this.cnt];
     this.lst.style.zIndex='1';
     if (zxcmd.match('A')){ this.auto(); }
    }
    
    zxcSSOOP.prototype.next=function(){
     this.cnt+=this.d;
     if (this.cnt==this.imgary.length){ this.cnt=0; }
     if (this.cnt<0){ this.cnt=this.imgary.length-1; }
     this.lst.style.zIndex='0';
     this.imgary[this.cnt].style.zIndex='1';
     this.lst=this.imgary[this.cnt];
     this.d=this.d||1;
    }
    
    zxcSSOOP.prototype.auto=function(){
     this.next();
     this.setTimeOut('auto()',this.dly);
    }
    
    zxcSSOOP.prototype.setTimeOut=function(zxcf,zxcd){
     this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
    }
    
    Array.prototype.randomise=function(){
     this.cnt=0; this.ta=[];
     while (this.cnt<this.length){ zxctmp=Math.floor(Math.random()*this.length-1)+1; if (!this.ta[zxctmp]){this.ta[zxctmp]=this[this.cnt]; this.cnt++; } }
     return this.ta;
    }
    
    function zxcSSStyle(zxcele,zxcstyle){
     for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
    }
    
    
    //-->
    </script></head>
    
    <body onload="zxcOOPSlideShow('TstSS1','',2000,1);zxcOOPSlideShow('TstSS2','RA');">
    <div id="TstSS1" style="position:relative;width:100px;height:50px;" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="50" >
    <img  src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="100" height="50" >
    <img  src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="100" height="50" >
    <img  src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width="100" height="50" >
    <img  src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" width="100" height="50" >
    <img  src="http://www.vicsjavascripts.org.uk/StdImages/Six.gif" width="100" height="50" >
    <img  src="http://www.vicsjavascripts.org.uk/StdImages/Seven.gif" width="100" height="50" >
    <img  src="http://www.vicsjavascripts.org.uk/StdImages/Eight.gif" width="100" height="50" >
    </div>
    <input type="button" name="" value="Next" onclick="zxcSSImg('TstSS1',1)">
    <input type="button" name="" value="Auto" onclick="zxcSSImg('TstSS1')">
    <input type="button" name="" value="Last" onclick="zxcSSImg('TstSS1',-1)"><br>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="25" height="13" onclick="zxcSSImg('TstSS1',0,1)" >
    <img  src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="25" height="13" onclick="zxcSSImg('TstSS1',0,2)" >
    <img  src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="25" height="13" onclick="zxcSSImg('TstSS1',0,3)" >
    <img  src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width="25" height="13" onclick="zxcSSImg('TstSS1',0,4)" >
    <br>
    <img  src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" width="25" height="13" onclick="zxcSSImg('TstSS1',0,5)" >
    <img  src="http://www.vicsjavascripts.org.uk/StdImages/Six.gif" width="25" height="13" onclick="zxcSSImg('TstSS1',0,6)" >
    <img  src="http://www.vicsjavascripts.org.uk/StdImages/Seven.gif" width="25" height="13" onclick="zxcSSImg('TstSS1',0,7)" >
    <img  src="http://www.vicsjavascripts.org.uk/StdImages/Eight.gif" width="25" height="13" onclick="zxcSSImg('TstSS1',0,8)" >
    <br>
    <br>
    <div id="TstSS2" style="position:relative;width:100px;height:50px;" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="50" >
    <img  src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="100" height="50" >
    <img  src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="100" height="50" >
    <img  src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width="100" height="50" >
    <img  src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" width="100" height="50" >
    <img  src="http://www.vicsjavascripts.org.uk/StdImages/Six.gif" width="100" height="50" >
    <img  src="http://www.vicsjavascripts.org.uk/StdImages/Seven.gif" width="100" height="50" >
    <img  src="http://www.vicsjavascripts.org.uk/StdImages/Eight.gif" width="100" height="50" >
    </div>
    <input type="button" name="" value="Next" onclick="zxcSSImg('TstSS2',1)">
    <input type="button" name="" value="Auto" onclick="zxcSSImg('TstSS2')">
    <input type="button" name="" value="Last" onclick="zxcSSImg('TstSS2',-1)">
    </body>
    
    </html>
    Last edited by vwphillips; 07-27-2006 at 10:21 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Jul 2006
    Location
    Cape Town, South Africa
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks 4 taking the time to answer my post and so speedily too.
    Very much appreciated.
    Unfortunately i need to ask you some more.

    I have used your example code exactly the same without changing anything except for the images.( short address)
    I dont get a slide show but i get all the images in column (except for one which disappears after the page has loaded).

    I then copied the code in a new page with nothing else and i still get the same effect.

    What could i be overlooking?

    Thanks

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    // ***** Initialisation
    // Each Slide Show must be initialised from a <BODY> or window onload event
    // e.g.
    // <body onload="zxcOOPSlideShow('fred','',2000,2);">
    or post a link to your code

    should have said

    welcome
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    New to the CF scene
    Join Date
    Jul 2006
    Location
    Cape Town, South Africa
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I used the <body onload....>
    sorry cant link .not published
    image swap.txt

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    just tested using my images and its fine.

    may be the size of your images.

    how large are they in KByte?

    if large they may need preloading prior to initialising the script


    I'm sure we can fix

    edit


    but there again if you are using this locally it should not make a difference, will have to think

    edit again

    can you zip your images and post
    Last edited by vwphillips; 07-28-2006 at 01:24 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New to the CF scene
    Join Date
    Jul 2006
    Location
    Cape Town, South Africa
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmmm
    The images range from between 2.6 to 3.4 Kb.

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    can you zip and post your images

    and run this and let me know the text box values

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html >
    <head>
    
    <title>Untitled Document</title>
    
    <script language="JavaScript" type="text/javascript">
    
    
    
    // **** Functional Code - NO NEED to Change
    
    function zxcSSImg(zxcid,zxcd,zxcnu){
     var zxcoop=window['zxcSS'+zxcid];
     if (!window['zxcSS'+zxcid]){ return; }
     clearTimeout(zxcoop.to);
     if (zxcnu){ if (zxcnu<1||zxcnu>=zxcoop.imgary.length){ return; }; zxcoop.cnt=zxcnu-1; zxcoop.d=0; zxcoop.next(); }
     else if (zxcd==1||zxcd==-1){ zxcoop.d=zxcd; zxcoop.next(); }
     else if (!zxcnu) { zxcoop.auto(); }
    }
    
    function zxcOOPSlideShow(zxcid,zxcmd,zxcdly,zxcfirst){
    document.Show.Show0.value=vic++;
     if (window['zxcSS'+zxcid]){ return; }
    document.Show.Show1.value=vic++;
     window['zxcSS'+zxcid]=new zxcSSOOP(zxcid,zxcmd,zxcdly,zxcfirst);
    }
    
    function zxcSSOOP(zxcid,zxcmd,zxcdly,zxcfirst){
    document.Show.Show2.value=vic++;
     var zxcp=document.getElementById(zxcid);
     var zxcimgs=zxcp.getElementsByTagName('IMG');
    document.Show.Show3.value=zxcimgs.length;
     if (!zxcimgs){ return; }
    document.Show.Show4.value=vic++;
     this.imgary=[];
     for (var zxc0=0;zxc0<zxcimgs.length;zxc0++){vic++; zxcSSStyle(zxcimgs[zxc0],{position:'absolute',zIndex:'0',left:'0px',top:'0px'}); this.imgary.push(zxcimgs[zxc0]); }
    document.Show.Show5.value=vic++;
     if (zxcmd.match('R')){ this.imgary=this.imgary.randomise(); }
     this.ref='zxcSS'+zxcid;
     window[this.ref]=this;
     this.to=null
     this.dly=zxcdly||1000;
     this.d=1;
     this.cnt=zxcfirst||1;
     this.cnt--;
     this.lst=zxcimgs[this.cnt];
     this.lst.style.zIndex='1';
     if (zxcmd.match('A')){ this.auto(); }
    document.Show.Show6.value=vic++;
    }
    
    zxcSSOOP.prototype.next=function(){
     this.cnt+=this.d;
     if (this.cnt==this.imgary.length){ this.cnt=0; }
     if (this.cnt<0){ this.cnt=this.imgary.length-1; }
     this.lst.style.zIndex='0';
     this.imgary[this.cnt].style.zIndex='1';
     this.lst=this.imgary[this.cnt];
     this.d=this.d||1;
    }
    
    zxcSSOOP.prototype.auto=function(){
     this.next();
     this.setTimeOut('auto()',this.dly);
    }
    
    zxcSSOOP.prototype.setTimeOut=function(zxcf,zxcd){
     this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
    }
    
    Array.prototype.randomise=function(){
     this.cnt=0; this.ta=[];
     while (this.cnt<this.length){ zxctmp=Math.floor(Math.random()*this.length-1)+1; if (!this.ta[zxctmp]){this.ta[zxctmp]=this[this.cnt]; this.cnt++; } }
     return this.ta;
    }
    
    function zxcSSStyle(zxcele,zxcstyle){
     for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
    }
    
    
    //-->
    </script>
    </head>
    
    <body onload="zxcOOPSlideShow('TstSS1','',2000,1);zxcOOPSlideShow('TstSS2','RA');">
    
    <div id="TstSS1" style="position: relative; width:100px; height:64px;">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="64">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="100" height="64">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="64">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="64">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="64">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="64">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="64">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="64">
    </div>
    <input type="button" name="" value="Next" onclick="zxcSSImg('TstSS1',1)">
    <input type="button" name="" value="Auto" onclick="zxcSSImg('TstSS1')">
    <input type="button" name="" value="Last" onclick="zxcSSImg('TstSS1',-1)"><br>
    <img src="capepoint.jpg" width="25" height="13" onclick="zxcSSImg('TstSS1',0,1)" >
    <img  src="capetown.jpg" width="25" height="13" onclick="zxcSSImg('TstSS1',0,2)" >
    <img  src="cableway.jpg" width="25" height="13" onclick="zxcSSImg('TstSS1',0,3)" >
    <img  src="capetown1.jpg" width="25" height="13" onclick="zxcSSImg('TstSS1',0,4)" >
    <br>
    <img  src="clifton.jpg" width="25" height="13" onclick="zxcSSImg('TstSS1',0,5)" >
    <img  src="cticc.jpg" width="25" height="13" onclick="zxcSSImg('TstSS1',0,6)" >
    <img  src="bakoven.jpg" width="25" height="13" onclick="zxcSSImg('TstSS1',0,7)" >
    <img  src="beach.jpg" width="25" height="13" onclick="zxcSSImg('TstSS1',0,8)" >
    <br>
    <br>
    <div id="TstSS2" style="position: relative; width:100px; height:50px;" >
    <img src="capegrace1.jpg"  >
    <img  src="farm2.jpg"  >
    <img  src="farm.jpg" >
    <img  src="tableview.jpg"  >
    <img  src="thebays.jpg" >
    <img  src="waterfront.jpg" >
    <img  src="waterfront1.jpg" >
    <img  src="waterfront2.jpg"  >
    </div>
    <input type="button" name="" value="Next" onclick="zxcSSImg('TstSS2',1)">
    <input type="button" name="" value="Auto" onclick="zxcSSImg('TstSS2')">
    <input type="button" name="" value="Last" onclick="zxcSSImg('TstSS2',-1)">
    <script> vic=0; </script>
    <form name=Show id=Show style="position:absolute;visibility:visible;top:450px;left:0px;" >
    <input size=10 name=Show0 >
    <input size=10 name=Show1 >
    <input size=10 name=Show2 >
    <input size=10 name=Show3 >
    <input size=10 name=Show4 >
    <input size=10 name=Show5 >
    <input size=10 name=Show6 >
    <input size=10 name=Show7 >
    <input size=10 name=Show8 >
    <input size=10 name=Show9 >
    </form>
    
    </body>
    </html>
    also

    It is important that the credits are left intact
    // Simple Slide Show OOP (27-July-2006)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #9
    New to the CF scene
    Join Date
    Jul 2006
    Location
    Cape Town, South Africa
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    image attachement
    images.zip

  • #10
    New to the CF scene
    Join Date
    Jul 2006
    Location
    Cape Town, South Africa
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Text box values 0 1 2 8 3 Blank etc

  • #11
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    using the limited number of images you ziped

    it worked fine

    but the tb numbers identified where it stopped for you

    try this and let me know the text box numbers
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html >
    <head>
    
    <title>Untitled Document</title>
    
    <script language="JavaScript" type="text/javascript">
    // Simple Slide Show OOP (27-July-2006)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    
    // **** Functional Code - NO NEED to Change
    
    function zxcSSImg(zxcid,zxcd,zxcnu){
     var zxcoop=window['zxcSS'+zxcid];
     if (!window['zxcSS'+zxcid]){ return; }
     clearTimeout(zxcoop.to);
     if (zxcnu){ if (zxcnu<1||zxcnu>=zxcoop.imgary.length){ return; }; zxcoop.cnt=zxcnu-1; zxcoop.d=0; zxcoop.next(); }
     else if (zxcd==1||zxcd==-1){ zxcoop.d=zxcd; zxcoop.next(); }
     else if (!zxcnu) { zxcoop.auto(); }
    }
    
    function zxcOOPSlideShow(zxcid,zxcmd,zxcdly,zxcfirst){
    document.Show.Show0.value=vic++;
     if (window['zxcSS'+zxcid]){ return; }
    document.Show.Show1.value=vic++;
     window['zxcSS'+zxcid]=new zxcSSOOP(zxcid,zxcmd,zxcdly,zxcfirst);
    }
    
    function zxcSSOOP(zxcid,zxcmd,zxcdly,zxcfirst){
    document.Show.Show2.value=vic++;
     var zxcp=document.getElementById(zxcid);
     var zxcimgs=zxcp.getElementsByTagName('IMG');
    document.Show.Show3.value=zxcimgs.length;
     if (!zxcimgs){ return; }
    document.Show.Show4.value=vic++;
     this.imgary=[];
     for (var zxc0=0;zxc0<zxcimgs.length;zxc0++){
      vic++;
      zxcimgs[zxc0].style.position='absolute';
      zxcimgs[zxc0].style.zIndex='0';
      zxcimgs[zxc0].style.left='0px';
      zxcimgs[zxc0].style.top='0px';
      this.imgary.push(zxcimgs[zxc0]);
     }
    document.Show.Show5.value=vic++;
     if (zxcmd.match('R')){ this.imgary=this.imgary.randomise(); }
     this.ref='zxcSS'+zxcid;
     window[this.ref]=this;
     this.to=null
     this.dly=zxcdly||1000;
     this.d=1;
     this.cnt=zxcfirst||1;
     this.cnt--;
     this.lst=zxcimgs[this.cnt];
     this.lst.style.zIndex='1';
     if (zxcmd.match('A')){ this.auto(); }
    document.Show.Show6.value=vic++;
    }
    
    zxcSSOOP.prototype.next=function(){
     this.cnt+=this.d;
     if (this.cnt==this.imgary.length){ this.cnt=0; }
     if (this.cnt<0){ this.cnt=this.imgary.length-1; }
     this.lst.style.zIndex='0';
     this.imgary[this.cnt].style.zIndex='1';
     this.lst=this.imgary[this.cnt];
     this.d=this.d||1;
    }
    
    zxcSSOOP.prototype.auto=function(){
     this.next();
     this.setTimeOut('auto()',this.dly);
    }
    
    zxcSSOOP.prototype.setTimeOut=function(zxcf,zxcd){
     this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
    }
    
    Array.prototype.randomise=function(){
     this.cnt=0; this.ta=[];
     while (this.cnt<this.length){ zxctmp=Math.floor(Math.random()*this.length-1)+1; if (!this.ta[zxctmp]){this.ta[zxctmp]=this[this.cnt]; this.cnt++; } }
     return this.ta;
    }
    
    function zxcSSStyle(zxcele,zxcstyle){
     for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
    }
    
    
    //-->
    </script>
    </head>
    
    <body onload="zxcOOPSlideShow('TstSS1','',2000,1);zxcOOPSlideShow('TstSS2','RA');">
    
    <div id="TstSS1" style="position: relative; width:100px; height:64px;">
    <img src="bakoven1.jpg" width="100" height="64">
    <img src="bakoven.jpg" width="100" height="64">
    <img src="capetown.jpg" width="100" height="64">
    <img src="clifton.jpg" width="100" height="64">
    <img src="beach.jpg" width="100" height="64">
    <img src="capepoint.jpg" width="100" height="64">
    <img src="capetown.jpg" width="100" height="64">
    <img src="capetown.jpg" width="100" height="64">
    </div>
    <input type="button" name="" value="Next" onclick="zxcSSImg('TstSS1',1)">
    <input type="button" name="" value="Auto" onclick="zxcSSImg('TstSS1')">
    <input type="button" name="" value="Last" onclick="zxcSSImg('TstSS1',-1)"><br>
    <img src="capepoint.jpg" width="25" height="13" onclick="zxcSSImg('TstSS1',0,1)" >
    <img  src="capetown.jpg" width="25" height="13" onclick="zxcSSImg('TstSS1',0,2)" >
    <img  src="cableway.jpg" width="25" height="13" onclick="zxcSSImg('TstSS1',0,3)" >
    <img  src="capetown1.jpg" width="25" height="13" onclick="zxcSSImg('TstSS1',0,4)" >
    <br>
    <img  src="clifton.jpg" width="25" height="13" onclick="zxcSSImg('TstSS1',0,5)" >
    <img  src="cticc.jpg" width="25" height="13" onclick="zxcSSImg('TstSS1',0,6)" >
    <img  src="bakoven.jpg" width="25" height="13" onclick="zxcSSImg('TstSS1',0,7)" >
    <img  src="beach.jpg" width="25" height="13" onclick="zxcSSImg('TstSS1',0,8)" >
    <br>
    <br>
    <div id="TstSS2" style="position: relative; width:100px; height:50px;" >
    <img src="bakoven1.jpg" width="100" height="64">
    <img src="bakoven.jpg" width="100" height="64">
    <img src="capetown.jpg" width="100" height="64">
    <img src="clifton.jpg" width="100" height="64">
    <img src="beach.jpg" width="100" height="64">
    <img src="capepoint.jpg" width="100" height="64">
    <img src="capetown.jpg" width="100" height="64">
    <img src="capetown.jpg" width="100" height="64">
    </div>
    <input type="button" name="" value="Next" onclick="zxcSSImg('TstSS2',1)">
    <input type="button" name="" value="Auto" onclick="zxcSSImg('TstSS2')">
    <input type="button" name="" value="Last" onclick="zxcSSImg('TstSS2',-1)">
    <script> vic=0; </script>
    <form name=Show id=Show style="position:absolute;visibility:visible;top:450px;left:0px;" >
    <input size=10 name=Show0 >
    <input size=10 name=Show1 >
    <input size=10 name=Show2 >
    <input size=10 name=Show3 >
    <input size=10 name=Show4 >
    <input size=10 name=Show5 >
    <input size=10 name=Show6 >
    <input size=10 name=Show7 >
    <input size=10 name=Show8 >
    <input size=10 name=Show9 >
    </form>
     <br>
     Text box values 0 1 2 8 3 Blank etc
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #12
    New to the CF scene
    Join Date
    Jul 2006
    Location
    Cape Town, South Africa
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yee ha!!
    Its starting to pull through.
    Nice one!!

    the tb no's

    14 15 16 8 17 26 27 blank etc

    Thanks for all the effort Vic!

    p.s why would it work your side and not here?

  • #13
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    why would it work your side and not here?
    that a bit of a worry as I use the replaced zxcStyle function alot to save code
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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