Hey all,

 

I have a set of images stored in an array

 

var pictures = new Array(; 
for (i=0; i<=8; i++){

pictures[0] = new Image();
pictures[1] = new Image();
pictures[2] = new Image();
pictures[3] = new Image();
pictures[4] = new Image();
pictures[5] = new Image();
pictures[6] = new Image();
pictures[7] = new Image();
pictures[8] = new Image();

pictures[0].src = "../images/megan_01.jpg";
pictures[1].src = "../images/megan_02.jpg";
pictures[2].src = "../images/megan_03.jpg";
pictures[3].src = "../images/megan_04.jpg";
pictures[4].src = "../images/megan_05.jpg";
pictures[5].src = "../images/megan_06.jpg";
pictures[6].src = "../images/megan_07.jpg";
pictures[7].src = "../images/megan_08.jpg";
pictures[8].src = "../images/megan_09.jpg";
}	

 

and a 3x3 table

document.write('<center><table width="20" border="0">');

//loop for rows
for (j=0;j<=2;j++)
{
document.write('<tr>');

//loop for columns
for (i=0;i<=2;i++)
{
document.write('<td>' + '<img src='+pictures[i].src+'/>'+ '</td>');

}
document.write('</tr>');
}
document.write('</table></center>'); 

 

The problem that I am having is that the table will only display the first three images and then repeat the first three images for the other two rows following.

 

Can someone please assist?

Bit hacky (because i'm at work) - but should work:)

 

<script>
var pictures = []; 
pictures[0]     = new Image();
pictures[1]     = new Image();
pictures[2]     = new Image();
pictures[3]     = new Image();
pictures[4]     = new Image();
pictures[5]     = new Image();
pictures[6]     = new Image();
pictures[7]     = new Image();
pictures[8]     = new Image();
pictures[9]     = new Image();
pictures[10]    = new Image();

pictures[0].src     =   "../images/megan_01.jpg";
pictures[1].src     =   "../images/megan_02.jpg";
pictures[2].src     =   "../images/megan_03.jpg";
pictures[3].src     =   "../images/megan_04.jpg";
pictures[4].src     =   "../images/megan_05.jpg";
pictures[5].src     =   "../images/megan_06.jpg";
pictures[6].src     =   "../images/megan_07.jpg";
pictures[7].src     =   "../images/megan_08.jpg";
pictures[8].src     =   "../images/megan_09.jpg";
pictures[9].src     =   "../images/megan_09.jpg";    
pictures[10].src    =   "../images/megan_10.jpg";    

document.write('<div align="center"><table width="20" border="0">');

var columns     =   3;
var amount      =   Math.round(pictures.length/columns);
var position    =   0;
//loop for rows
for (j=0;j<=amount;j++)
{
   document.write('<tr>');

   //loop for columns
   for (i=0;i<=columns;i++)
   {
       // Calculate a incrementing number
       position    =   i+j*amount;

       // Output
       document.write('<td>' + '<img src='+pictures[position].src+'/>'+ '</td>');

   }
   document.write('</tr>');
}
document.write('</table></div>'); 

</script>

Bit hacky (because i'm at work) - but should work:)

 

<script>
var pictures = []; 
pictures[0]     = new Image();
pictures[1]     = new Image();
pictures[2]     = new Image();
pictures[3]     = new Image();
pictures[4]     = new Image();
pictures[5]     = new Image();
pictures[6]     = new Image();
pictures[7]     = new Image();
pictures[8]     = new Image();
pictures[9]     = new Image();
pictures[10]    = new Image();

pictures[0].src     =   "../images/megan_01.jpg";
pictures[1].src     =   "../images/megan_02.jpg";
pictures[2].src     =   "../images/megan_03.jpg";
pictures[3].src     =   "../images/megan_04.jpg";
pictures[4].src     =   "../images/megan_05.jpg";
pictures[5].src     =   "../images/megan_06.jpg";
pictures[6].src     =   "../images/megan_07.jpg";
pictures[7].src     =   "../images/megan_08.jpg";
pictures[8].src     =   "../images/megan_09.jpg";
pictures[9].src     =   "../images/megan_09.jpg";    
pictures[10].src    =   "../images/megan_10.jpg";    

document.write('<div align="center"><table width="20" border="0">');

var columns     =   3;
var amount      =   Math.round(pictures.length/columns);
var position    =   0;
//loop for rows
for (j=0;j<=amount;j++)
{
   document.write('<tr>');

   //loop for columns
   for (i=0;i<=columns;i++)
   {
       // Calculate a incrementing number
       position    =   i+j*amount;

       // Output
       document.write('<td>' + '<img src='+pictures[position].src+'/>'+ '</td>');

   }
   document.write('</tr>');
}
document.write('</table></div>'); 

</script>

I don't quite follow the logic of the way you generate position. I would have thought that having position set to 0 outside the loops and then simply incrementing it would have done the job?

 

To answer your question, Ren, your second loop is going 0, 1, 2 but your first is making that happen 3 times, so your results will always be

0, 1, 2

0, 1, 2

0, 1, 2

 

All you need is an incrementing value starting from 0 and you'll get your different images.

 

Incidently, I wouldn't bother pre-loading your images, it'll slow your scrip down because it'll have to load all the images before it can execute. Also, since all your file names are pretty similar, I'd use JavaScript to generate the link to the image:

document.write('<td>' + '<img src="../images/megan_0' + (position + 1) + '.jpg" />' + '</td>');

I don't quite follow the logic of the way you generate position. I would have thought that having position set to 0 outside the loops and then simply incrementing it would have done the job?

 

To answer your question, Ren, your second loop is going 0, 1, 2 but your first is making that happen 3 times, so your results will always be

0, 1, 2

0, 1, 2

0, 1, 2

 

All you need is an incrementing value starting from 0 and you'll get your different images.

 

Incidently, I wouldn't bother pre-loading your images, it'll slow your scrip down because it'll have to load all the images before it can execute. Also, since all your file names are pretty similar, I'd use JavaScript to generate the link to the image:

document.write('<td>' + '<img src="../images/megan_0' + (position + 1) + '.jpg" />' + '</td>');

 

 

haha what was i thinking. As i said i was at work so i didn't have too much time to contribute and wasnt thinking straight.