Simple Array

[eRott]

Hi,

 

I am just curious, how about's would I create a simple array, and add a previous and next button to show the previous or next content in the array. This is what I am aiming to have the array look like.

 

<script type="text/javascript">

var photo=new Array()

photo[0]="<a href='http://blah.com' title='blah'><img src='blah/blah/blah.jpg' style='blah: blahpx;' alt='blah'></a>"
photo[1]="<a href='http://blah.com' title='blah'><img src='blah/blah/blah.jpg' style='blah: blahpx;' alt='blah'></a>"
photo[2]="<a href='http://blah.com' title='blah'><img src='blah/blah/blah.jpg' style='blah: blahpx;' alt='blah'></a>"

 

Alternatively, is there a way to define a document element for the <a href=""> object? Basically, what I am trying to achieve, is to change the url or content for something depending on which number in the array it is. (if that makes sense). Perhaps someone will better understand if they take a look at the code and see what im trying to do.

 

<script type="text/javascript">
var photo=new Array()
var photolink=new Array()
var photodesc=new Array()
var which=0
var link=1

photo[0]="images/thumbs/img001.jpg"
photo[1]="images/thumbs/img002.jpg"
photo[2]="images/thumbs/img003.jpg"
photo[3]="images/thumbs/img004.jpg"

photodesc[0]="Description 1"
photodesc[1]="Description 2"
photodesc[2]="Description 3"
photodesc[3]="Description 4"

photolink[0]="http://www.domain.com/images/img001.jpg"
photolink[1]="http://www.domain.com/images/img002.jpg"
photolink[2]="http://www.domain.com/images/img003.jpg"
photolink[3]="http://www.domain.com/images/img004.jpg"


var preloadedimages=new Array()
for (i=0;i<photo.length;i++){
preloadedimages[i]=new Image()
preloadedimages[i].src=photo[i]
}


function keeptrack(){
window.status="Image "+(which+1)+" of "+photo.length
}


function backward(){
if (which>0){
which--
document.images.photoslider.src=photo[which]
document.href.photourl.URL=photolink[which]
document.href.photourl.title=photodesc[which]
keeptrack()
}
}

function forward(){
if (which<photo.length-1){
which++
document.images.photoslider.src=photo[which]
document.href.photourl.URL=photolink[which]
document.href.photourl.title=photodesc[which]
keeptrack()
}
}
</script>


<script>
if (link==1)
document.write('<a href="'+photolink[which]+'" name="photourl" title="'+photodesc[which]+'">')
document.write('<img src="'+photo[0]+'" name="photoslider" style="border: 0px;">')
if (link==1)
document.write('</a>')
</script>


<a href="javascript:backward()">Previous</a>
<a href="javascript:forward()">Next</a>

 

Please note as you can tell, I have a VERY limited knowledge of javascript.

 

Any ideas?

 

Thanks.

Regards.

[emehrkay]

This should start you off.  Let me know if you need any more help with it or if it doesnt work because i havent tested it

 

//lets create a namespace/object. it is easier to work with in the longrun
var arrayMover = {

//define your vals array, each index holds and object with easy to read/edit info
vals: [
	{
		image: 'images/thumbs/img001.jpg'
		alink: 'whatever.php',
		desc:  'whatever'				
	},
	{
		image: 'images/thumbs/img002.jpg'
		alink: 'whatever2.php',
		desc:  'whatever2'				
	},	
],

//current vals array index
index: 0,

ini: function(){
	//define the variables that will be used in this ini function
	var forward = document.getElementById('forward');
	var backward = document.getElementById('backward');
	var v_len = arrayMover.vals.length - 1;

	//event handlers for the forward and back butons. 
	//you want to increment/decrement the index based on what is clicked. and if you want it to loop, set the index to the max(v_len) or zero when necessary
	//return false so that the link doesnt do anyting to the url when clicked
	forward.onclick = function(){
		if(++arrayMover.index > v_len) arrayMover.index = 0;
		arrayMover.updateThings();
		return false;
	};
	backward.onclick = function(){
		if(--arrayMover.index < 0) arryMover.index = v_len;
		arrayMover.updateThings();
		return false;
	};
},



//use this method to update content on your page with stuff that is found in the array	
updateThings: function(dir){
	//define the thing that you want to update
	//i used a single element for the image, link, and description block
	var img = document.getElementById('image');
	var alink = document.getElementById('alink');
	var desc = document.getElementById('desc');

	//shortcut to current vals index
	var arr = arrayMover.vals[arrayMover.index];

	//applay the apporiate data
	img.src = arr.image;
	alink.href = arr.alink;
	desc.innerHtml = arr.desc;
}	
};

onload = function(){
arrayMover.ini();	
};

 

and use these elements in your html

 

<img src="whatever.png" alt="whatver" id="image" />

<a href="whatever.php" id="alink">Link</a>

<p id="desc">description here</p>

 

<a href="#" id="backward">Previous</a>

<a href="#" id="forward">Next</a>