Problem with coding multiple slideshows using one script.

URackEm · 07-17-2008, 07:22 PM

Ok, so first please tell me if I am in the wrong area and I will quickly move this thread elsewhere.

Im fairly new to javascript and am completely self taught so I know I am missing a lot of basics. I created a script that I use to easily create a slideshow using images named 1 through 6.jpg or other extension I specify that are saved inside a particular folder. The following is an example of working script for a single slideshow with a 2 second delay.

Code:

<script type="text/javascript">
var o="/Images/Work/Locations/numbers/"
var p=0
var q=".jpg"


function gallery()
{
	if (p==6){
	p=1;
	document.getElementById('Slide-Show').src = o+1+q;
	}
	else {
	p=p+1;
	document.getElementById('Slide-Show').src = o+p+q;
	}
setTimeout("gallery()",2000)
}

-->
</script>


<body onLoad="gallery()">

<img id="Slide-Show" height="200" width="200" src="/Images/Work/Locations/numbers/1.jpg">

</body>
</html>

Simple right? I know. But what I want to do is create an array for the 'Slide-Show' portion of ".getElementById('Slide-Show').src" to run several slideshows at once, reducing the amount of redundant script on my page. I created an Array, "id", with several portions of URL to direct the script to the appropriate folder depending on which slideshow is started, figuring I could somehow call the function using the "onClick" in a link next to the image starting the slideshow and passing the variable from it as well, I just don't know how. Here is what I have so far..

Code:

<script type="text/javascript">


function changeLoc(newLoc){
var Services="/images/Loc-Services.jpg";
var Portfolio="/images/Loc-Portfolio.jpg";
	document.getElementById('locImage').src = newLoc;
}


var a="/Images/Work/Locations/gibberish/"
var b="/Images/Work/Locations/letters/"
var o="/Images/Work/Locations/numbers/"
var p=0
var q=".jpg"
var id = new Array();
id[0] = "Slide-Show";
id[1] = "Slide-Show2";
id[2] = "Slide-Show3";


function gallery(type){


	if (p==6){
	p=1;
	document.getElementById(id).src = type+1+q;
	}
	else {
	p=p+1;
	document.getElementById(id).src = type+p+q;
	}
setTimeout("gallery()",500)
}
-->
</script>
<body>

<img border="0" id="Slide-Show" height="200" width="200" src="/Images/Work/Locations/numbers/1.jpg"><a style="text-decoration:none" onClick="gallery(o)" href="#test">Begin this slide-show.</a>
</body>
</html>

I have spent HOURS researching arrays, calling functions and passing variables on several sites and can't find anything remotely dealing with what I am looking for.

I really appreciate ANY help you can give, and thank you in advance for your time.

rangana · 07-18-2008, 03:00 AM

What's the content of id? You should have set it first:

Code:

function gallery(type){
var id='Slide-Show';

	if (p==6){
	p=1;
	document.getElementById(id).src = type+1+q;
	}
	else {
	p=p+1;
	document.getElementById(id).src = type+p+q;
	}
setTimeout("gallery()",500)
}

Hope it helps.

URackEm · 07-18-2008, 06:11 AM

Thank you very much for looking at my script, however it looks like you are suggesting defining "id" as "Slide-Show", which is not what I want to do. I accomplished that with the first section of code I posted.

I want to be able to click a link on the page that has several different slideshows controlled by this single script. Thereby solving the redundancy of having several copies of the same script called separately by different slideshows.

The onClick should call the function gallery(); and somehow tell Array "id" whether "Slide-Show", "Slide-Show1" or "Slide-Show2"... Was called. (unless there is a better way to do this of course.)

Actually, a thought just occured to me. I can pass 2 variables while calling a function right? Does calling the function with 2 parameters work? "gallery(id, type)" for instance?

with several portions of URL to direct the script to the appropriate folder depending on which slideshow is started, figuring I could somehow call the function using the "onClick" in a link next to the image starting the slideshow and passing the variable from it as well, I just don't know how. Here is what I have so far..

Code:

<script type="text/javascript">


function changeLoc(newLoc){
var Services="/images/Loc-Services.jpg";
var Portfolio="/images/Loc-Portfolio.jpg";
	document.getElementById('locImage').src = newLoc;
}


var a="/Images/Work/Locations/gibberish/"
var b="/Images/Work/Locations/letters/"
var o="/Images/Work/Locations/numbers/"
var p=0
var q=".jpg"

function gallery(id,type){


	if (p==6){
	p=1;
	document.getElementById(id).src = type+1+q;
	}
	else {
	p=p+1;
	document.getElementById(id).src = type+p+q;
	}
setTimeout("gallery()",500)
}
-->
</script>
<body>

<img border="0" id="Slide-Show" height="200" width="200" src="/Images/Work/Locations/numbers/1.jpg"><a style="text-decoration:none" onClick="gallery('Slide-Show',o)" href="#test">Begin this slide-show.</a>
<img border="0" id="Slide-Show1" height="200" width="200" src="/Images/Work/Locations/letters/1.jpg"><a style="text-decoration:none" onClick="gallery('Slide-Show1',b)" href="#test">Begin this slide-show.</a>
<img border="0" id="Slide-Show2" height="200" width="200" src="/Images/Work/Locations/gibberish/1.jpg"><a style="text-decoration:none" onClick="gallery('Slide-Show2',o)" href="#test">Begin this slide-show.</a>
</body>
</html>

I need to test this out when I get back to work. But let me know what you think.