Click through array

[bigheadedd]

Hi,

 

I'm having a little trouble trying to think how I can do this.

I have a page, which has two buttons (<) & (>) to go through an image gallery. In the main of the page is a div which is updated via ajax, as it calls a seperate php page (which pulls the images etc from the database). This is just done through simple GET variables.

I can do all of the php stuff, however I'm not so great with the javascript part of it all.

What I ideally need to do is to be able to pull in a range of ID's into a javascript array (which i've managed to do), but then have a simple javascript action to pass the variable into the ajax div.

 

filenames[]

would have something like "1", "2", "7", "10" (the filename ID's).

It would then click through with the < & > buttons.

 

Is anyone able to help me at all? Would be massively grateful if so!

Thanks

Edd

[gamesmstr]

what have you got so far that we can look at?

[bigheadedd]

Hi,

 

Yeah, heres what i've got so far:

 

<script type="text/javascript">

/***********************************************
* DHTML slideshow script-  © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice must stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var photos=new Array()
var photoslink=new Array()
var which=0

//define images. You can have as many as you want:

<?php
//loop through database and add in ID numbers to
        //photos[1], photos[2] etc etc
?>

//Specify whether images should be linked or not (1=linked)
var linkornot=0

//Set corresponding URLs for above images. Define ONLY if variable linkornot equals "1"
photoslink[0]=""
photoslink[1]=""
photoslink[2]=""

//do NOT edit pass this line

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


function applyeffect(){
if (document.all && photoslider.filters){
photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23)
photoslider.filters.revealTrans.stop()
photoslider.filters.revealTrans.apply()
}
}



function playeffect(){
if (document.all && photoslider.filters)
photoslider.filters.revealTrans.play()
}

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


function backward(){
if (which>0){
which--
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
} else if (which==0){
applyeffect()
var end = photos.length-1
which = end
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}
var end = photos.length-1
function forward(){

if (which<photos.length-1){
which++
applyeffect()
document.images.photoslider.src=photos[which]

playeffect()
keeptrack()

}else if (which==end){
applyeffect()
var start = 0
which = start
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}


}

function transport(){
window.location=photoslink[which]
}

</script>

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code

function ajaxFunction(){
var ajaxRequest;  // The variable that makes Ajax possible!

try{
	// Opera 8.0+, Firefox, Safari
	ajaxRequest = new XMLHttpRequest();
} catch (e){
	// Internet Explorer Browsers
	try{
		ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try{
			ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e){
			// Something went wrong
			alert("Your browser broke!");
			return false;
		}
	}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
	if(ajaxRequest.readyState == 4){
		var ajaxDisplay = document.getElementById('ajaxDiv');
		ajaxDisplay.innerHTML = ajaxRequest.responseText;

	}
}


// Re do query string
var string = "<?php echo $photos[]; ?>";
var queryString = "?photo=" + string;
ajaxRequest.open("GET", "includes/single.php" + queryString, true);
ajaxRequest.send(null); 
}

//-->
</script>

<div id='ajaxDiv'>
</div>
<div id="fullcontainer">


<script>
if (linkornot==0)
document.write('<a href="" onClick="forward();return false">')
document.write('<img src="'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)" border=0>')
if (linkornot==0)
document.write('</a>')
</script>

 

Now, i've had this working so that it works as an image slider, pulling the images out etc, however I don't want to preload everything as there could be hundreds of photos. I think I can use the above code to pass in just the ID numbers to the ajax/php script. I hope this makes sense!

 

Thanks

Edd

[gamesmstr]

Yes you can, just pass them as an array.  Use PHP to populate it with as few or as many as you like.