Can't get more images to show with this code?

[JRR]

Hello.

I have this old javascript code that I want to use on Halloween for my forum. I have put it in my test forum and it is actually putting the images in a the number it was made for but I want to add more images. When I add them to the array it still only displays six of the images and it also randomly chooses which six it wants to display also? You can open the page and see the images like a ghost and zombie along with four others and then open the page again and it may have dropped the zombie and displayed another?

I currently have it on my test forum to view:


http://betaitistheride.freemessageboards.com/

Here is the code with a added seventh image in the array:

<script type="text/javascript">
<!--

//Autumn leaves- by Kurt Grigg (kurt.grigg@virgin.net)
//Modified by Dynamic Drive for NS6 functionality
//visit http://www.dynamicdrive.com for this script
//Modified by jscheuer1 in http://www.dynamicdrive.com/forums
//to fall up, add doctype compatibility & account for
//differences in speeds among browsers

var speed=60  // 12 to whatever (60 is pretty slow) higher numbers are slower
Amount=8; //Smoothness depends on image file size, the smaller the size the more you can use!

//Pre-load your image below!
grphcs=new Array(7)
Image0=new Image();
Image0.src=grphcs[0]="http://www.jr-richscooterdoc.com/HW/skel1.gif ";
Image1=new Image();
Image1.src=grphcs[1]="http://www.jr-richscooterdoc.com/HW/skel2.gif"
Image2=new Image();
Image2.src=grphcs[2]="http://www.jr-richscooterdoc.com/HW/skel3.gif"
Image3=new Image();
Image3.src=grphcs[3]="http://www.jr-richscooterdoc.com/HW/skel4.gif"
Image4=new Image();
Image4.src=grphcs[4]="http://www.jr-richscooterdoc.com/HW/skel5.gif"
Image5=new Image();
Image5.src=grphcs[5]="http://www.jr-richscooterdoc.com/HW/skel6.gif"
Image6=new Image();
Image6.src=grphcs[6]="http://www.jr-richscooterdoc.com/HW/skel7.gif"



//////////////// Stop Editing //////////////

function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

Ypos=new Array();
Xpos=new Array();
Speed=new Array();
Step=new Array();
Cstep=new Array();
ns=(document.layers)?1:0;
ns6=(document.getElementById&&!document.all||window.opera)?1:0;

speed=ns6? speed-12 : speed

if (ns){
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");
}
}
else{
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
}
document.write('</div></div>');
}
WinHeight=(ns||ns6)?window.innerHeight:window.iecompattest().clientHeight;
WinWidth=(ns||ns6)?window.innerWidth-70:window.iecompattest().clientWidth;
for (i=0; i < Amount; i++){                                                                
 Ypos[i] = Math.round(Math.random()*WinHeight);
Xpos[i] = Math.round(Math.random()*WinWidth);
Speed[i]= (Math.random()*5+3)*-1;
Cstep[i]=0;
Step[i]=Math.random()*0.1+0.05;
}
function fall(){
var WinHeight=(ns||ns6)?window.innerHeight:window.iecompattest().clientHeight;
var WinWidth=(ns||ns6)?window.innerWidth-70:window.iecompattest().clientWidth;
var hscrll=(ns||ns6)?window.pageYOffset:iecompattest().scrollTop;
var wscrll=(ns||ns6)?window.pageXOffset:iecompattest().scrollLeft;
for (i=0; i < Amount; i++){
sy = Speed[i]*Math.sin(90*Math.PI/180);
sx = Speed[i]*Math.cos(Cstep[i]);
Ypos[i]+=sy;
Xpos[i]+=sx; 
if (Ypos[i] < 0 ){
Ypos[i]=WinHeight+60;
Xpos[i]=Math.round(Math.random()*WinWidth);
Speed[i]=(Math.random()*5+3)*-1;
}
if (ns){
document.layers['sn'+i].left=Xpos[i]+wscrll;
document.layers['sn'+i].top=Ypos[i]+hscrll;
}
else if (ns6){
document.getElementById("si"+i).style.left=Math.min(WinWidth,Xpos[i])+wscrll+'px';
document.getElementById("si"+i).style.top=Ypos[i]+hscrll-100+'px';
}
else{
document.all["si"+i].style.left=Xpos[i]+wscrll+'px';
document.all["si"+i].style.top=Ypos[i]+hscrll+'px';
} 
Cstep[i]+=Step[i];
}
setTimeout('fall()',60);
}

window.onload=fall
//-->
</script>

I changed this to 7 thinking that would do the trick but not so?

grphcs=new Array(7)

Can someone help me fix this so it will display all of the images I want to add?

Thanks.

[jscheuer1]

As long as the Amount is equal to or greater than the length of the array (it is here, 8 > 7), it will sometimes. The problem is that each image that's shown is picked at random from the array. In order to be sure to get them all, they must be selected in order with any overflow looping back to the first and starting from there. Make the change (red) to the highlighted line:

else{
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++){
var P=i%grphcs.length;
rndPic=grphcs[P];
document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
}

But this will result in the same images being picked in the same order each time. If that's OK with you, fine. For a more random effect that selects at least one of each image, use the more recent version of this script that we've been working on in the Autumn Leaves thread. It also has several other advantages over this version.

[JRR]

Sorry John I haven't replied I've been ill I'll check this out and get back

Thanks

[JRR]

John I tried this and I'm a bit confused? I did not find this line you mentioned in this section of code?

else{
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++){
var P=i%grphcs.length);
rndPic=grphcs[P];
document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
}

I do see a section that is close?

else{
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
}

I tried this change and it was a real mess up. I changed this line:

var P=Math.floor(Math.random()*grphcs.length);

To this:

var P=i%Math.floor(Math.random()*grphcs.length);

But that was a total mess up in fact the software would not keep the small i but rather changed it to a capital I. It wiped out my banner and login page and I'm waiting for a solution from POB to get it out.

I don't mind the images loading in order, I just want to be able to see all the images I put in the array. I don't want to put in 7 images and the code limit it to 6 and choose what 6 for me to see.

[JRR]

Ok I've got things back in order on my site so I'll wait for the next reply.

[jscheuer1]

Change this:

var P=Math.floor(Math.random()*grphcs.length);

to:

var P=i%grphcs.length;

[JRR]

OK John I did this and the code shuts down, nothing, nada. Not one image will appear or load? So what's next?

Thanks

[jscheuer1]

Oops, I had a typo. I fixed it in my two previous posts, it should be:

var P=i%grphcs.length;

Not:

var P=i%grphcs.length);

[romeshlogan]

There is nothing wrong in your coding. Only the skel2.gif was not displayed due to a semicolon mistake as seen at JRR's website. If the first image code is rectified without the semicolon as detailed below, all 7 images would be displaying perfectly fine.

Image0.src=grphcs[0]="http://www.jr-richscooterdoc.com/HW/skel1.gif "; // wrong with a semicolon

Image0.src=grphcs[0]="http://www.jr-richscooterdoc.com/HW/skel1.gif" // correct without a semicolon

Rgds
romeshlogan

[jscheuer1]

That's not exactly true. The semi-colon there is optional. What needs to be removed is that space near the end (after gif and before "):

Image0.src=grphcs[0]="http://www.jr-richscooterdoc.com/HW/skel1.gif ";

That image probably wasn't showing up. But that has nothing to do with how many images are shown, that's controlled by:

Amount=8; //Smoothness depends on image file size, the smaller the size the more you can use!

As long as that's equal to or greater than the length of the array of images, they will all be shown, sometimes. To make sure that they're always all shown make the change to (this code is slightly different, before it had a typo):

var P=i%grphcs.length;

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.