Automatic random slideshow from folder of images

[lorne17]

Ok, so I replaced all theimages with myImages. I can't see where the problem is. I can't see where it is, because I am not familiar with javascript.

Can you help pinpoint and fix this script? I REALLY appreciate it.

Thanks so much,
Lorne

<script type="text/javascript"> 

var maxImages = 99; 
var myImages = new Array(); 
// 
var imgPath = "/bpa-images/Home Slideshow/"; 
var imgPrefix = "image"; 
var imgSuffix = ".jpg"; 
// 
function preloadComplete() 
{ 
    this.complete = true; 
} 
function preloadError() 
{ 
    this.complete = false; 
} 
function preloadImages() 
{ 
    for (var x=1; x<=maxImages; ++x) 
    { 
        myImages[x] = new Image(); 
        myImages[x].onerror = preloadError; 
        myImages[x].onload = preloadComplete; 
        myImages[x].src = imgPath + imgPrefix + x + imgSuffix; 
    } 
    return true; 
} 
preloadImages();

///// Plugin variables 

playspeed=2000;// The playspeed determines the delay for the "Play" button in ms 
dotrans=1; // if value = 1 then there are transitions played in IE 
transtype='blendTrans';// 'blendTrans' or 'revealtrans' 
transattributes='23';// duration=seconds,transition=#<24 
//##### 
//key that holds where in the array currently are 
i=0; 


//########################################### 
//if random 
function SetRandom() { 
    tempimage = new Array(); 
    for(p=0; p<myImages.length; p++){ 
        for(p1=0; p1>-1; p1) { 
            tempNum = Math.floor(Math.random()*myImages.length) 
            if(!tempimage[tempNum]){ 
                tempimage[tempNum]=myImages[p]; 
                break; 
            } 
        } 
    } 
    for(p=0;p<myImages.length;p++)myImages[p]=tempimage[p]; 
} 

//if random order 
SetRandom() 


//########################################### 
window.onload=function(){ 

    //preload images into browser 
    preloadSlide(); 

    //set transitions 
    GetTrans(); 

    //set the first slide 
    SetSlide(0); 

    //autoplay 
    PlaySlide(); 
} 

//########################################### 
function SetSlide(num) { 
    //too big 
    i=num%myImages.length; 
    //too small 
    if(i<0)i=myImages.length-1; 

    //switch the image 
    if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Apply()') 
    document.images.imgslide.src=myImages[i][0]; 
    if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Play()') 

} 


//########################################### 
function PlaySlide() { 
    if (!window.playing) { 
        PlayingSlide(i+1); 
        if(document.slideshow.play){ 
            document.slideshow.play.value="   Stop   "; 
        } 
    } 
    else { 
        playing=clearTimeout(playing); 
        if(document.slideshow.play){ 
            document.slideshow.play.value="   Play   "; 
        } 
    } 
    // if you have to change the image for the "playing" slide 
    if(document.images.imgPlay){ 
        setTimeout('document.images.imgPlay.src="'+imgStop+'"',1); 
        imgStop=document.images.imgPlay.src 
    } 
} 


//########################################### 
function PlayingSlide(num) { 
    playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed); 
} 


//########################################### 
//desc: picks the transition to apply to the images 
function GetTrans() { 
    //si=document.slideshow.trans.selectedIndex; 

        if((document.slideshow.trans && document.slideshow.trans.selectedIndex == 0) || (!document.slideshow.trans && dotrans==0)){ 
        dotrans=0; 
    } 
    else if ((document.slideshow.trans && document.slideshow.trans.selectedIndex == 1) || (!document.slideshow.trans && transtype == 'blendTrans')){ 
        dotrans=1; 
        transtype='blendTrans'; 
        document.imgslide.style.filter = "blendTrans(duration=1,transition=1)"; 
    }else{ 
        dotrans=1; 
        transtype='revealtrans'; 
        if(document.slideshow.trans) transattributes=document.slideshow.trans[document.slideshow.trans.selectedIndex].value; 
        document.imgslide.style.filter = "revealTrans(duration=1,transition=" +transattributes+ ")"; 
    } 

} 
//########################################### 
function preloadSlide() { 
    for(k=0;k<myImages.length;k++) { 
        myImages[k][0]=new Image().src=myImages[k][0]; 
    } 
} 


</script> 


<!-- slide show HTML --> 
<form name="slideshow"> 

<table width="288" height="432" border="1" cellpadding="1" cellspacing="0" bordercolor="#560D1C"> 
<tr> 
    <td align="center"> 
    <a href="#" onmouseover="this.href=myImages[i][1];return false"> 
    <script type="text/javascript"> 
        documen 

[lorne17]

I have this posted at the top of my page in the <head> tag. Do I need this at all? Or do I need to edit this?

var slideimages=new Array()
    var slidelinks=new Array()
    function slideshowimages(){
    for (i=0;i<slideshowimages.arguments.length;i++){
    slideimages[i]=new Image()
    slideimages[i].src=slideshowimages.arguments[i]
    }
    }

    function slideshowlinks(){
    for (i=0;i<slideshowlinks.arguments.length;i++)
    slidelinks[i]=slideshowlinks.arguments[i]
    }

    function gotoshow(){
    if (!window.winslide||winslide.closed)
    winslide=window.open(slidelinks[whichlink])
    else
    winslide.location=slidelinks[whichlink]
    winslide.focus()
    } 

[MrNobody]

Can you supply a live link to the page as it exists on your website? It is awful hard to just look at text and spot errors. Learn how to use a script debugger and it will help you a lot. Firefox has a free debugger called Firebug. If you post a live link, then I can use Firebug on your page to find any problems.

[lorne17]

http://www.barleypfeiffer.com/main-backup.html

That's the live link. Let me know what you find please. Thanks for the help.

Lorne

[MrNobody]

OK, the first problem is that Firefox reports your page as not supplying standards compliance via a valid DOCTYPE. So make sure at least the following is the line right before your opening HTML tag:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                      "http://www.w3.org/TR/html4/loose.dtd">

The second problem is this:

Error: illegal character
Source File: http://www.barleypfeiffer.com/main-backup.html
Line: 1, Column: 17
Source Code:
MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()

Those opening and closing curly apostrophes are invalid. You need to use a straight apostrophe in both positions.

The third problem is that you still have references to theimage instead of myImages.

Lastly, I see that you need to change these:

function preloadComplete() 
{ 
    this.complete = true; 
} 
function preloadError() 
{ 
    this.complete = false; 
}

to these because the complete property is read-only.

function preloadComplete() 
{ 
    this.completed = true; 
} 
function preloadError() 
{ 
    this.completed = false; 
}

Note that all of this was determined just by looking at the error message being reported by the browser. I did not have to use a script debugger at all (yet). So, it would behoove you to check your error messages, and correct them, before throwing up your hands and just saying "it don't work."

[blayson]

Did anyone ever get this code to work?
If so, I would appreciate Knowing the final outcome.
I have Zero knowledge of code, but need something like this for my home page
Thank You, Butch

[JMRKER]

This is an older post with several pages of threads.

You might be better off starting a brand new thread and referencing this one instead of adding on.

Also you should show what you have tried
or to which particular post you are referencing of the many posts on this thread.

[vwphillips]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<input type="button" name="" value="GoTo 0" onmouseup="zxcSS('tst',0,0);"; />
<input type="button" name="" value="GoTo 1" onmouseup="zxcSS('tst',0,1);"; />
<input type="button" name="" value="GoTo 2" onmouseup="zxcSS('tst',0,2);"; />
<input type="button" name="" value="GoTo 3" onmouseup="zxcSS('tst',0,3);"; />
<input type="button" name="" value="GoTo 4" onmouseup="zxcSS('tst',0,4);"; />
<input type="button" name="" value="GoTo 5" onmouseup="zxcSS('tst',0,5);"; />
<input type="button" name="" value="GoTo 6" onmouseup="zxcSS('tst',0,6);"; />
<input type="button" name="" value="GoTo 7" onmouseup="zxcSS('tst',0,7);"; />
<input type="button" name="" value="GoTo 8" onmouseup="zxcSS('tst',0,8);"; />
<input type="button" name="" value="GoTo 9" onmouseup="zxcSS('tst',0,9);"; />
<br />
<input type="button" name="" value="Next" onmouseup="zxcSS('tst',1);"; />
<input type="button" name="" value="Back" onmouseup="zxcSS('tst',-1);"; />
<input type="button" name="" value="Pause" onmouseup="zxcSS('tst',0,false);"; />
<input type="button" name="" value="Auto" onmouseup="zxcSS('tst',0,true,500);"; />
<input type="button" name="" value="Random" onmouseup="zxcSS('tst',0,'random',500);"; />
<br /><br />
<img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/0.gif" />

<script type="text/javascript">
/*<![CDATA[*/

function zxcSS(id,ud,auto,ms,max){
 var obj=document.getElementById(id),o=zxcSS[id],nu,ary,ud=typeof(ud)=='number'?ud=ud<0?-1:ud>0?1:0:0;
 if (obj&&!o&&typeof(max)=='number'){
  o=zxcSS[id]={
   id:id,
   obj:obj,
   ary:[],
   rary:[],
   lgth:max,
   ms:typeof(ms)=='number'?ms:2000,
   cnt:0
  }
  for (var rary=[],url=obj.src.substring(0,obj.src.lastIndexOf('/')+1),file=obj.src.substring(obj.src.lastIndexOf('/')+1),z0=0;z0<=max;z0++){
   o.ary[z0]=new Image();
   o.ary[z0].src=url+file.replace(/\d/g,z0);
   o.rary[z0]=z0;
  }
 }
 if (o){
  clearTimeout(o.dly);
  nu=auto===true?o.cnt:auto;
  nu=typeof(auto)=='number'?auto:auto=='random'?o.rary[Math.floor(Math.random()*(o.lgth+1))]:o.cnt+ud;
  nu=nu>o.lgth?0:nu<0?o.lgth:nu;
  o.cnt=o.ary[nu]?nu:o.cnt;
  o.auto=auto===true||auto=='random';
  rotate(o,auto,ms||o.ms);
 }
}

function rotate(o,auto,ms){
 if (o.ary[o.cnt]&&o.ary[o.cnt].width>40){
  o.obj.src=o.ary[o.cnt].src;
 }
 if (o.auto===true){
  o.dly=setTimeout(function(){ o.cnt=++o.cnt%o.ary.length; zxcSS(o.id,0,auto); },ms);
 }
}
// parameter 0 = the image ID name
// parameter 1 = >0 = next, <0= back
// parameter 2 = true = auto, false = pause, 'random' = random or number = image number
// parameter 3 = the auto rotate hold dely
// parameter 4 = the maximum image number(0 to n)
 zxcSS('tst',0,true,2000,9);
/*]]>*/
</script>
</body>

</html>

[blayson]

The plugin I am using for site uses Markdown language, but says that html can be inserted.
Yes, I am way over my head!
Thank You
B