I searched bit found nothing about 2d array

[ShMiL]

Can someone show me an example of 2 dimensions array?
Thanks.

[eak]

var myArray=new Array();
myArray[0]=new Array();
myArray[0][0]="hi";
.
.
.
myArray[99][99]="what ever";

that is a simple way to do it... i would use a loop to make and fill all the arrays. if you dont have much content you can do literal arrays like this.

myArray=[['0','1'],['1','2'],['2','3'],['3','4']];

and you access the info the same way.
myArray[3][1] would equal '4'

[adios]

http://www.google.com/search?hl=en&ie=UTF-8&oe=UTF-8&q=javascript+two-dimensional+arrays

[ShMiL]

I did this:
<Script Language="JavaScript">
var cusArray=new Array();
cusArray[0]=new Array();
cusArray[0][0]="dog.htm";
cusArray[0][1]="dog.jpg";
cusArray[1][0]="cat.asp";
cusArray[1][1]="kitten.gif";
</script>
Few questions:
1. Did I do it right?
2. I want to select random cell ( if we call it cusArray[x],[y] = I want to select all the X group : [x][0],[x][1] ) and to display it as a link on a picture ([x][0]=href;[x][1]=img)... Could it be done?

Thanks alot!

[adios]

ShMiL -

Don't forget to create a new Array object inside every first-level element:

<script type="text/javascript" language="javascript">

var cusArray=new Array();
cusArray[0]=new Array();
cusArray[0][0]="dog.htm";
cusArray[0][1]="dog.jpg";
cusArray[1]=new Array();
cusArray[1][0]="cat.asp";
cusArray[1][1]="kitten.gif";

var rnd1 = Math.floor(Math.random() * cusArray.length);
var rnd2 = Math.floor(Math.random() * cusArray[rnd1].length);
var url = cusArray[rnd1][rnd2];
alert(url);

</script>

That'll get a random element. Change it to set the first element yourself & just get the second-level one at random.

Not exactly sure what you wanted to do with the url...

[ShMiL]

Works great!
I decided to make this show a random picture when the page loads - and after that, I want to have a 'back' and 'forward' button so that users can browse the pictures...
'forward' will show the next picture in the array (when it reaches the last it'll start all over again) and 'back' will show the previous picture in the array (when it reaches the first picture it'll go back to the last...)
Can someone help me do that?
(really sorry for the trouble:( )

[ShMiL]

Guys?
Anyone?
P L E A S E

[ShMiL]

Hate to be a pain in the *** but my project is finished and this is the last thing I've left to do...
I know I suck in JS, but I have alot on my mind these days - I can't find the time to take a JS course : (

Please help me.

[A1ien51]

Basic Idea
I am using basic names, you can figure out what you variable names are for this


if(CurrentImageNum>=TheImageArray.length)CurrentImageNumber=0;
if(CurrentImageNum<0)CurrentImageNum=TheImageArray.length-1;

[eak]

you can try this.
i dont know if it works. i just made it up. i have not used it or tested it at all.

var count=0;

var img=new array();

img[0]='zero.jpg';
img[1]='one.jpg';
img[2]='two.jpg';
img[3]='three.jpg';

function switchImg(way){

document.YOURIMAGE.src=img[count];
if(way==1){
if(count==img.length-1)count=0;
else count++;
}
if(way==-1){
if(count==0)count=img.length-1;
else count--;
}
}

call it like this
forward -> switchImg(1);
backwart -> switchImg(-1);

[ShMiL]

I can't try it because I don't know how to make the pictures 'switch'. I thought about putting an <img> tag and then everytime I go forward or back - to change the SRC property.
But I don't know how to do this either.
How can I change the SRC property of <img> according to the current image's array position?
Thanks.

[eak]

create in image with the name/id attribute.

document.YOURIMAGE.src=img[count];

replace 'YOURIMAGE' with the name/id you used in the img tag.

to switch to a different pic, just create a link like this

<a href="#" onclick="switchImg(1);return false">forward</a>
<a href="#" onclick="switchImg(-1);return false">back</a>

[ShMiL]

I'm doing this:

<Script Language="JavaScript">
var cusArray=new Array();
cusArray[0]=new Array();
cusArray[0][0]="ùå÷é (úì àáéá)";
cusArray[0][1]="thanks.jpg";
cusArray[1]=new Array();
cusArray[1][0]="ffff";
cusArray[1][1]="image1.gif";

var rnd1 = Math.floor(Math.random() * cusArray.length);
document.write("<img name="thePic" src="+cusArray[rnd1][1]+"><br>"+cusArray[rnd1][0])

function switchImg(way){
document.thePic.src=cusArray[count][1];
if(way==1){
if(count==cusArray.length-1)count=0;
else count++;
}
if(way==-1){
if(count==0)count=cusArray.length-1;
else count--;
}
}
</script>
<a href="#" onclick="switchImg(1);return false">forward</a>
<a href="#" onclick="switchImg(-1);return false">back</a>
But I get an error.
What's wrong?

[mordred]

The variable "count" that you use for an array index in this line


document.thePic.src=cusArray[count][1];


might be responsible for the error you get, since at this stage the variable is nowhere defined. Put a "count" variable outside of the function and initialize in a way like eak posted.

[ConfusedOfLife]

Sorry that I can't analyze your program, I'm not really in a good mood! But it's no need that you use a 2 dim array, why don't you make it with a normal array?! Now that you know how to get the src of an image, we're gonna make a function to return the number of your array, I mean for example if your image array is called myImg, then if someone presses the back or next button in your program, at first we have to find out what the current image is ( that's very easy, by referring to document.YOUR_IMG_TAG_NAME.SRC ) and then, we have to locate it inside it's array, I mean we have to find out the index of the relative cell in the array, ok? We write this function in this way:

function locateImg(oName)
{
for (i=0; i<myImg.length; i++)
if ( myImg[i] == oName )
return i
}


so, you see that now we have the index, another function that we need ( this is actually the function that's gonna call the locateImg inside itself ) is the function that determines what's the next image to load, if the user pressed the BACK key, then this function has to show the previous picture, and if the current picture's index is zero, then it means that it has to show the last image and vice versa, we're gonna write it in this way:

function showImg(oName, whichButt)
{
var nextImg = new Image;
var lastImg = myImg.length - 1;
oIndex = locateImg(oName);
if ( whichButt == "Next" )
nextImg.src = ( oIndex == lastImg ) ? ( myImg[0] ) : ( myImg [oIndex + 1 ] )
else
// if the pressed key isn't Next, then it's back!
nextImg.src = ( oIndex == 0 ) ( myImg[lastImg] ) : ( myImg[oIndex - 1 ] );
return nextImg.src;
}


Then you need to write the followings in your HTML code :

<img name="Oopse" src="something.jpg">

<input type="button" value="next" onclick = "document.Oopse.src = showImg( document.Oopse.src, 'Next' )">
<input type="button" value="back" onclick = "document.Oopse.src = showImg(document.Oopse.src, 'Back')">



I didn't run this program and it surely won't work! ( You know! even if something works, you can not say that it always works! ), but at least you got the idea and you can debug it yourself, you can also make it more encapsulated by sending the name of your image array to both functions that your functions be functional for all the img tags. And you can write the random image show yourself, ok?:thumbsup:

[ShMiL]

done this:
<Script Language="JavaScript">
var cusArray=new Array();
cusArray[0]=new Array();
cusArray[0][0]="ùå÷é (úì àáéá)";
cusArray[0][1]="thanks.jpg";
cusArray[1]=new Array();
cusArray[1][0]="ffff";
cusArray[1][1]="image1.gif";

var rnd1 = Math.floor(Math.random() * cusArray.length);
document.write("<img name="thePic" src="+cusArray[rnd1][1]+"><br>"+cusArray[rnd1][0])

var count = 0;

function switchImg(way){
document.thePic.src=cusArray[count][1];
if(way==1){
if(count==cusArray.length-1)count=0;
else count++;
}
if(way==-1){
if(count==0)count=cusArray.length-1;
else count--;
}
}
</script>
<a href="#" onclick="switchImg(1);return false">forward</a>
<a href="#" onclick="switchImg(-1);return false">back</a>
but it still doesn't work...
I'm no JS-expert - but:
1. maybe the fact that the <img> tag is written using JS makes the problem?!
2. In eak's code, and in the one above, I put 0 into 'count'. The count var. isn't suppose to get the current array position?

[ShMiL]

ConfusedOfLife
I have to have 2d array because I have text for every image...

[beetle]

Here's some slideshow code I did for a friend a while back. It has captions and navigation controls, preloads the images, and could easily be changed to use a 2d array instead of two separate arrays.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN" />
<HTML>
<HEAD>
<title>Slideshow test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">

var preImages = new Array('pic1.jpg','pic2.jpg','pic3.jpg');
var ssImages = new Array();
var imgRoot = "images/slideshow/";
for (var i=0; i<preImages.length; i++) {
ssImages[i] = new Image()
ssImages[i].src = imgRoot + preImages[i];
}

var captions = new Array();
var i = 0;
captions[i++] = "Caption Number One";
captions[i++] = "Caption Number Two";
captions[i++] = "Caption Number Three";

var curSlide = 0;

function goSlide(v)
{
switch(v) {
case 'prev':
case 'back':
curSlide--; break;
case 'next':
case 'foward':
curSlide++; break;
default:
curSlide = v - 1;
}
if (curSlide == -1)
curSlide = parseInt(ssImages.length - 1);
if (curSlide == ssImages.length)
curSlide = 0;
document.getElementById('slide').src = ssImages[curSlide].src;
captionText.firstChild.nodeValue = innerText = captions[curSlide];
statusText.firstChild.nodeValue = "Slide " + (curSlide + 1) + " of " + ssImages.length;
}

</script>
</head>

<body onLoad="goSlide(1);">
<table width="272" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="300" align="center" valign="top">
<img src="" name="slide" width="216" >
</td>
</tr>
<tr>
<td height="87" align="center" valign="middle">
<span id="captionText">Not Initialized</span>
<br>
<span id="statusText">Not Initialized</span>
<p>
<a href="javascript:goSlide('prev')">&lt;&lt; Prev</a> |
<a href="javascript:goSlide(1)">1</a> |
<a href="javascript:goSlide(2)">2</a> |
<a href="javascript:goSlide(3)">3</a> |
<a href="javascript:goSlide('foward')">Next &gt;&gt;</a>
</p>
</td>
</tr>
</table>
</body>
</html>

[ShMiL]

this is very good!
But i'd like to put the text and the src in 2d array and not in two seperated arrays.
what do you say?

[beetle]

If you really think it's important or necessary, then sure. Here's 1 approach (there are others)var preImages = new Array('pic1.jpg','pic2.jpg','pic3.jpg');
var preCaps = new Array('Caption Number One','Caption Number Two','Caption Number Three');
var ssData = new Array();
var imgRoot = "images/slideshow/";
for (var i=0; i<preImages.length; i++) {
ssData[i] = new Array()
ssData[i][0] = new Image();
ssData[i][0].src = imgRoot + preImages[i];
ssData[i][1] = preCaps[i];
}

var curSlide = 0;

function goSlide(v)
{
switch(v) {
case 'prev':
case 'back':
curSlide--; break;
case 'next':
case 'foward':
curSlide++; break;
default:
curSlide = v - 1;
}
if (curSlide == -1)
curSlide = parseInt(ssImages.length - 1);
if (curSlide == ssData.length)
curSlide = 0;
document.getElementById('slide').src = ssData[curSlide][0].src;
captionText.firstChild.nodeValue = ssData[curSlide][1];
statusText.firstChild.nodeValue = "Slide " + (curSlide + 1) + " of " + ssData.length;
}

[ShMiL]

I don't understand why you create two arrays and combine them?
Is it necessary?
I want it as simple as possible.
by thee way:
Thanks alot for your help! if you need some help with ASP - email me!
I know how annoying it might be for you...
sorry

[beetle]

No, it's not necessary.

Simple from what standpoint? To use? I think in either form it's pretty easy to use.

the reason (in the original code) I used the extra array to hold the image names is so that I could run the loop that populates another array with image objects, which also preloads all the images in the slideshow.

This is a relatively small amount of data (even a 30-slide slidewhow) so using just 1 2d array versus 2 1d arrays doesn't make much of a difference to the machine. If I were you, I'd just use the first one I posted. Simple enuf.

Sorry, I won't be needing any ASP help, I do PHP.

[ShMiL]

it's for hundreds of images, pulled dynamically from a DB.
I didn't understand (my poor English) the reason you made two arrays.
I want it to look exactly like a DB table - only in JS. And then to manipulate the data into a picture browser...

[beetle]

Ok.

1) Are you loading ALL of those images at once? If not, how many?

2) Regardless of you answer to #1, do you want the images to preload? Or have the image load at the time of the switch (user would have to wait)

[ShMiL]

1. I'm loading all of them at once.
2. I don't want to preload since there might be a lot of images.
Thanks for the help, again :)

[beetle]

Piece of cake. I also added an idea for an additional navigation tool. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN" />
<HTML>
<HEAD>
<title>Slideshow test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../styles/styles.css" rel="stylesheet" type="text/css">

<script language="javascript">

var imgRoot = "images/slideshow/";
var curSlide = 0;
var ssData = [
['pic1.jpg','Caption 1'],
['pic2.jpg','Caption 2'],
['pic3.jpg','Caption 3']
];

function goSlide(v)
{
switch(v) {
case 'prev':
case 'back':
curSlide--; break;
case 'next':
case 'foward':
curSlide++; break;
default:
curSlide = v - 1;
}
if (curSlide == -1)
curSlide = parseInt(ssImages.length - 1);
if (curSlide == ssData.length)
curSlide = 0;
document.getElementById('slide').src = imgRoot + ssData[curSlide][0];
captionText.firstChild.nodeValue = ssData[curSlide][1];
statusText.firstChild.nodeValue = "Slide " + (curSlide + 1) + " of " + ssData.length;
}

</script>
</head>

<body onLoad="goSlide(1);">
<table width="272" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="300" align="center" valign="top">
<img src="" name="slide" width="216" >
</td>
</tr>
<tr>
<td height="87" align="center" valign="middle">
<span id="captionText" class="usaosmallgold">Not Initialized</span>
<br>
<span id="statusText" class="tabs">Not Initialized</span>
<p>
<a href="javascript:goSlide('prev')">&lt;&lt; Prev</a> |
<a href="javascript:goSlide(1)">1</a> |
<a href="javascript:goSlide(2)">2</a> |
<a href="javascript:goSlide(3)">3</a> |
<a href="javascript:goSlide('foward')">Next &gt;&gt;</a><br>
<select onChange="if (this.selectedIndex != 0) goSlide(this.selectedIndex)">
<option selected>Pick a slide</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
</tr>
</table>
</body>
</html>

[ShMiL]

You are the BEST!
I'll try to customize it and to add the first-time random feature.
Thanks alot!

[ShMiL]

Did some changes here and there.
But somehow it doesn't work...
Even in your example: when it reaches the first picture and I try to hit the 'back' button - it doesn't work. The 'forward' works great and the 'back' only works when it's not displaying the first picture.
Do you know what to do?

[ShMiL]

Found the prob...
You've written 'ssImages' instead of 'ssData' somewhere.
Thanks alot and have a great weekend!

[ShMiL]

1. at the beginning, when the page loads - I get 'Not Initialized' and a broken picture image (after a few seconds it's OK). Is there a way to avoide this?
2. When I switch pictures (forward/back) the text is changing quickly and the image stays the same until the next (or previous) picture loads. Can I make it dissappear and then to reload the next picture - because people might be confused when they get a caption which does not match the picture.
Thanks. :D

[ASAAKI]

Originally posted by ShMiL

2. When I switch pictures (forward/back) the text is changing quickly and the image stays the same until the next (or previous) picture loads. Can I make it dissappear and then to reload the next picture - because people might be confused when they get a caption which does not match the picture.Thanks. :D

why don't u preload the pictures when the page loads?
for that u'll do for example:
var img1 = new Image();
img1.src="whatever";

with lots of images u cud do a loop that preloads them all in sequence.

[ShMiL]

but it's more than 1MB of pictures!
I don't want the user to wait minutes before he can start browsing...

[Vladdy]

Check out my implementation of image slideshow that allows user to start browsing while downloading images in the background.
http://www.vladdy.net/webdesign/SlideShow.html

[ShMiL]

I really appreciate your work but I already have something working and I don't want to start all over again - I just want to adjust what I already have to perfectly fit my needs.
Anyone can help me with that?

[ShMiL]

I do this (as you told me):
statusText.firstChild.nodeValue = "<font color=red> pic #" + (curSlide + 1) + "</font> out of " + ssData.length;
(I have: <span id="statusText"></span>)
But it displays it like this:
<font color=red> pic #2</font> out of 20

Why won't it decode the HTML code (I checked few tags and non of them worked)?
Thanks

[ConfusedOfLife]

nodeValue doesn't decode! It assumes everything as text, you have to use innerHTML if you wana decode to html.

[ShMiL]

THANKS!