Automatic random slideshow from folder of images

This site is best viewed in a modern browser with JavaScript enabled.

Automatic random slideshow from folder of images

lorne17

Hello there,

I am trying to make a slideshow that cycles through images in a specific folder randomly every 2 seconds. The reason I'm trying to do this is to allow for easier updates in the future and all I have to change is the images in the folder and not have to mess with the webpage itself.

Does that make sense?

Any help would be greatly appreciate it.

Thanks,
Lorne

MrNobody

Using only standard JavaScript, in an Internet-based web page, will not allow you to retrieve the names of the files in a server folder. The only work-around for this is if all of the files have the same text prefix and are suffixed by a number. Such as:

image1.jpg
image2.jpg
image3.jpg
...etc...

Using this scheme, JavaScript can guess at the file names and, using error trapping, even be able to handle missing files in the sequence. Of course, this is not the best method. The best method is to use server-side code to either generated to page content directly, or to pass the file names to JavaScript, as a JavaScript data array, so that JavaScript can generate the page content based on the array values. Of course, you could also maintain a .js file which contains the JavaScript data array -- no server-side code needed.

lorne17

I'd like to use the workaround. Seems to be my best option. But I'm fairly new with javascript. Do you have or know of any tutorials that I could refer to? It'd help a lot. Thanks,

Lorne

MrNobody

Don't know of any specific tutorials, but for JavaScript to handle images in the manner you've described will require the use of the JavaScript Array() object, the Image() object, its onerror and onload events, and the window.setTimeout() method.

http://www.w3schools.com/jsref/default.asp

lorne17

Hello again,

I got this working correctly:

<script type="text/javascript">
theimage = new Array();


// The dimensions of ALL the images should be the same or some of them may look stretched or reduced in Netscape 4.
// Format: theimage[...]=[image URL, link URL, name/description]
theimage[0]=["bpa-images/Home Slideshow/image01.jpg", "", ""];
theimage[1]=["bpa-images/Home Slideshow/image02.jpg", "", ""];
theimage[2]=["bpa-images/Home Slideshow/image03.jpg", "", ""];
theimage[3]=["bpa-images/Home Slideshow/image04.jpg", "", ""];
theimage[4]=["bpa-images/Home Slideshow/image05.jpg", "", ""];
theimage[5]=["bpa-images/Home Slideshow/image06.jpg", "", ""];
theimage[6]=["bpa-images/Home Slideshow/image07.jpg", "", ""];
theimage[7]=["bpa-images/Home Slideshow/image08.jpg", "", ""];
theimage[8]=["bpa-images/Home Slideshow/image09.jpg", "", ""];
theimage[9]=["bpa-images/Home Slideshow/image10.jpg", "", ""];
theimage[10]=["bpa-images/Home Slideshow/image11.jpg", "", ""];
theimage[11]=["bpa-images/Home Slideshow/image12.jpg", "", ""];
theimage[12]=["bpa-images/Home Slideshow/image13.jpg", "", ""];
theimage[13]=["bpa-images/Home Slideshow/image14.jpg", "", ""];
theimage[14]=["bpa-images/Home Slideshow/image15.jpg", "", ""];
theimage[15]=["bpa-images/Home Slideshow/image16.jpg", "", ""];
theimage[16]=["bpa-images/Home Slideshow/image17.jpg", "", ""];
theimage[17]=["bpa-images/Home Slideshow/image18.jpg", "", ""];
theimage[18]=["bpa-images/Home Slideshow/image19.jpg", "", ""];
theimage[19]=["bpa-images/Home Slideshow/image20.jpg", "", ""];
theimage[20]=["bpa-images/Home Slideshow/image21.jpg", "", ""];
theimage[21]=["bpa-images/Home Slideshow/image22.jpg", "", ""];
theimage[22]=["bpa-images/Home Slideshow/image23.jpg", "", ""];
theimage[23]=["bpa-images/Home Slideshow/image24.jpg", "", ""];
theimage[24]=["bpa-images/Home Slideshow/image25.jpg", "", ""];
theimage[25]=["bpa-images/Home Slideshow/image26.jpg", "", ""];
theimage[26]=["bpa-images/Home Slideshow/image27.jpg", "", ""];
theimage[27]=["bpa-images/Home Slideshow/image28.jpg", "", ""];
theimage[28]=["bpa-images/Home Slideshow/image29.jpg", "", ""];
theimage[29]=["bpa-images/Home Slideshow/image30.jpg", "", ""];
theimage[30]=["bpa-images/Home Slideshow/image31.jpg", "", ""];

///// Plugin variables

playspeed=2000;// The playspeed determines the delay for the "Play" button in ms
dotrans=1; // if value = 1 then there are transitions played in IE
transtype='blendTrans';// 'blendTrans' or 'revealtrans'
transattributes='23';// duration=seconds,transition=#<24
//#####
//key that holds where in the array currently are
i=0;


//###########################################
//if random
function SetRandom() {
	tempimage = new Array();
	for(p=0; p<theimage.length; p++){
		for(p1=0; p1>-1; p1) {
			tempNum = Math.floor(Math.random()*theimage.length)
			if(!tempimage[tempNum]){
				tempimage[tempNum]=theimage[p];
				break;
			}
		}
	}
	for(p=0;p<theimage.length;p++)theimage[p]=tempimage[p];
}

//if random order
SetRandom()


//###########################################
window.onload=function(){

//preload images into browser
preloadSlide();

//set transitions
GetTrans();

//set the first slide
SetSlide(0);

//autoplay
PlaySlide();
}

//###########################################
function SetSlide(num) {
	//too big
	i=num&#37;theimage.length;
	//too small
	if(i<0)i=theimage.length-1;

//switch the image
if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Apply()')
document.images.imgslide.src=theimage[i][0];
if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Play()')

}


//###########################################
function PlaySlide() {
	if (!window.playing) {
		PlayingSlide(i+1);
		if(document.slideshow.play){
			document.slideshow.play.value="   Stop   ";
		}
	}
	else {
		playing=clearTimeout(playing);
		if(document.slideshow.play){
			document.slideshow.play.value="   Play   ";
		}
	}
	// if you have to change the image for the "playing" slide
	if(document.images.imgPlay){
		setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
		imgStop=document.images.imgPlay.src
	}
}


//###########################################
function PlayingSlide(num) {
	playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);
}


//###########################################
//desc: picks the transition to apply to the images
function GetTrans() {
	//si=document.slideshow.trans.selectedIndex;

	if((document.slideshow.trans && document.slideshow.trans.selectedIndex == 0) || (!document.slideshow.trans && dotrans==0)){
	dotrans=0;
}
else if ((document.slideshow.trans && document.slideshow.trans.selectedIndex == 1) || (!document.slideshow.trans && transtype == 'blendTrans')){
	dotrans=1;
	transtype='blendTrans';
	document.imgslide.style.filter = "blendTrans(duration=1,transition=1)";
}else{
	dotrans=1;
	transtype='revealtrans';
	if(document.slideshow.trans) transattributes=document.slideshow.trans[document.slideshow.trans.selectedIndex].value;
	document.imgslide.style.filter = "revealTrans(duration=1,transition=" +transattributes+ ")";
}

}
//###########################################
function preloadSlide() {
	for(k=0;k<theimage.length;k++) {
		theimage[k][0]=new Image().src=theimage[k][0];
	}
}


</script>


<!-- slide show HTML -->
<form name="slideshow">

<table border="0" cellpadding="0" cellspacing="0">
<tr>
	<td align="center">
	<a href="#" onmouseover="this.href=theimage[i][1];return false">
	<script type="text/javascript">
		document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
	</script>
	</a>
	</td>
</tr>
</table>

</form>

But what I would like to do is get this code to not depend on how many files are in the folder. This way we can just add/remove images and keep them to the naming scheme: image01.jpg, image02.jpg, etc. Is there a way to have the script add one to each? image i+1. I have done something similar in Actionscript before, but I cannot figure it out with Java script. Any help would be great.

Thanks,
Lorne

MrNobody

The following is written for no leading zeroes: meaning, use image1.jpg and not image01.jpg:

var maxImages = 99;
var myImages = new Array();
//
var imgPath = "bpa-images/Home Slideshow/";
var imgPrefix = "image";
var imgSuffix = ".jpg";
//
function preloadComplete()
{
    this.complete = true;
}
function preloadError()
{
    this.complete = false;
}
function preloadImages()
{
    for (var x=1; i<=maxImages; ++x)
    {
        myImages[x] = new Image();
        myImages[x].onerror = preloadError;
        myImages[x].onload = preloadComplete;
        myImages[x].src = imgPath + imgPrefix + x + imgSuffix;
    }
    return true;
}
window.onload = preloadImages;

lorne17

Ok so I copied your code and replaced this:

theimage = new Array();


// The dimensions of ALL the images should be the same or some of them may look stretched or reduced in Netscape 4.
// Format: theimage[...]=[image URL, link URL, name/description]
theimage[0]=["bpa-images/Home Slideshow/image01.jpg", "", ""];
theimage[1]=["bpa-images/Home Slideshow/image02.jpg", "", ""];
theimage[2]=["bpa-images/Home Slideshow/image03.jpg", "", ""];
theimage[3]=["bpa-images/Home Slideshow/image04.jpg", "", ""];
theimage[4]=["bpa-images/Home Slideshow/image05.jpg", "", ""];
theimage[5]=["bpa-images/Home Slideshow/image06.jpg", "", ""];
theimage[6]=["bpa-images/Home Slideshow/image07.jpg", "", ""];
theimage[7]=["bpa-images/Home Slideshow/image08.jpg", "", ""];
theimage[8]=["bpa-images/Home Slideshow/image09.jpg", "", ""];
theimage[9]=["bpa-images/Home Slideshow/image10.jpg", "", ""];
theimage[10]=["bpa-images/Home Slideshow/image11.jpg", "", ""];
theimage[11]=["bpa-images/Home Slideshow/image12.jpg", "", ""];
theimage[12]=["bpa-images/Home Slideshow/image13.jpg", "", ""];
theimage[13]=["bpa-images/Home Slideshow/image14.jpg", "", ""];
theimage[14]=["bpa-images/Home Slideshow/image15.jpg", "", ""];
theimage[15]=["bpa-images/Home Slideshow/image16.jpg", "", ""];
theimage[16]=["bpa-images/Home Slideshow/image17.jpg", "", ""];
theimage[17]=["bpa-images/Home Slideshow/image18.jpg", "", ""];
theimage[18]=["bpa-images/Home Slideshow/image19.jpg", "", ""];
theimage[19]=["bpa-images/Home Slideshow/image20.jpg", "", ""];
theimage[20]=["bpa-images/Home Slideshow/image21.jpg", "", ""];
theimage[21]=["bpa-images/Home Slideshow/image22.jpg", "", ""];
theimage[22]=["bpa-images/Home Slideshow/image23.jpg", "", ""];
theimage[23]=["bpa-images/Home Slideshow/image24.jpg", "", ""];
theimage[24]=["bpa-images/Home Slideshow/image25.jpg", "", ""];
theimage[25]=["bpa-images/Home Slideshow/image26.jpg", "", ""];
theimage[26]=["bpa-images/Home Slideshow/image27.jpg", "", ""];
theimage[27]=["bpa-images/Home Slideshow/image28.jpg", "", ""];
theimage[28]=["bpa-images/Home Slideshow/image29.jpg", "", ""];
theimage[29]=["bpa-images/Home Slideshow/image30.jpg", "", ""];
theimage[30]=["bpa-images/Home Slideshow/image31.jpg", "", ""];

So my new code looks like this:

<script type="text/javascript">

var maxImages = 99;
var myImages = new Array();
//
var imgPath = "bpa-images/Home Slideshow/";
var imgPrefix = "image";
var imgSuffix = ".jpg";
//
function preloadComplete()
{
    this.complete = true;
}
function preloadError()
{
    this.complete = false;
}
function preloadImages()
{
    for (var x=1; i<=maxImages; ++x)
    {
        myImages[x] = new Image();
        myImages[x].onerror = preloadError;
        myImages[x].onload = preloadComplete;
        myImages[x].src = imgPath + imgPrefix + x + imgSuffix;
    }
    return true;
}
window.onload = preloadImages;

///// Plugin variables

playspeed=2000;// The playspeed determines the delay for the "Play" button in ms
dotrans=1; // if value = 1 then there are transitions played in IE
transtype='blendTrans';// 'blendTrans' or 'revealtrans'
transattributes='23';// duration=seconds,transition=#<24
//#####
//key that holds where in the array currently are
i=0;


//###########################################
//if random
function SetRandom() {
	tempimage = new Array();
	for(p=0; p<theimage.length; p++){
		for(p1=0; p1>-1; p1) {
			tempNum = Math.floor(Math.random()*theimage.length)
			if(!tempimage[tempNum]){
				tempimage[tempNum]=theimage[p];
				break;
			}
		}
	}
	for(p=0;p<theimage.length;p++)theimage[p]=tempimage[p];
}

//if random order
SetRandom()


//###########################################
window.onload=function(){

//preload images into browser
preloadSlide();

//set transitions
GetTrans();

//set the first slide
SetSlide(0);

//autoplay
PlaySlide();
}

//###########################################
function SetSlide(num) {
	//too big
	i=num%theimage.length;
	//too small
	if(i<0)i=theimage.length-1;

//switch the image
if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Apply()')
document.images.imgslide.src=theimage[i][0];
if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Play()')

}


//###########################################
function PlaySlide() {
	if (!window.playing) {
		PlayingSlide(i+1);
		if(document.slideshow.play){
			document.slideshow.play.value="   Stop   ";
		}
	}
	else {
		playing=clearTimeout(playing);
		if(document.slideshow.play){
			document.slideshow.play.value="   Play   ";
		}
	}
	// if you have to change the image for the "playing" slide
	if(document.images.imgPlay){
		setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
		imgStop=document.images.imgPlay.src
	}
}


//###########################################
function PlayingSlide(num) {
	playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);
}


//###########################################
//desc: picks the transition to apply to the images
function GetTrans() {
	//si=document.slideshow.trans.selectedIndex;

	if((document.slideshow.trans && document.slideshow.trans.selectedIndex == 0) || (!document.slideshow.trans && dotrans==0)){
	dotrans=0;
}
else if ((document.slideshow.trans && document.slideshow.trans.selectedIndex == 1) || (!document.slideshow.trans && transtype == 'blendTrans')){
	dotrans=1;
	transtype='blendTrans';
	document.imgslide.style.filter = "blendTrans(duration=1,transition=1)";
}else{
	dotrans=1;
	transtype='revealtrans';
	if(document.slideshow.trans) transattributes=document.slideshow.trans[document.slideshow.trans.selectedIndex].value;
	document.imgslide.style.filter = "revealTrans(duration=1,transition=" +transattributes+ ")";
}

}
//###########################################
function preloadSlide() {
	for(k=0;k<theimage.length;k++) {
		theimage[k][0]=new Image().src=theimage[k][0];
	}
}


</script>


<!-- slide show HTML -->
<form name="slideshow">

<table width="288" height="432" border="1" cellpadding="1" cellspacing="0" bordercolor="#560D1C">
<tr>
	<td align="center">
	<a href="#" onmouseover="this.href=theimage[i][1];return false">
	<script type="text/javascript">
		document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
	</script>
	</a>
	</td>
</tr>
</table>

</form>

But when I go to preview it, it bugs down Safari and it gives me an error saying that the script is slow and making Safari unresponsive.

Did I do something wrong? Can someone help me clean up this script?

Thanks,

Lorne

MrNobody

Well, one problem I see is that you're already using the window onload event for your other scripts. So, change this:

window.onload = preloadImages;

to this:

preloadImages();

Because the script I gave you does not have to wait until the page completes loading. Otherwise, I don't know if your browser is complaining about your other scripts or about the one I gave you. The one I gave you isn't that burdensome on the browser -- though it does take memory to create Image objects. There is no other way (without server-side code) for JavaScript to dynamically build a list of file names from the server. In conclusion, the only thing you can do to make my script do less, is to change the maxImages variable to a smaller number.

JMRKER

Do you have a URL to the images or a link to test the code with using Safari?
Are you getting the same problems with FF and/or MSIE?

Found one error:

    for (var x=1; i<=maxImages; ++x) {

Should change the 'i' to 'x'.

MrNobody

Oops, that would definitely cause the browser to complain. Sorry.

lorne17

Hey there,

Sorry I have been MIA, work got busy and I have been pushing this off until now.

I made the changes as you asked, it fixed my safari from bogging down. So that's good. But it doesn't show any images?? Do you know why this is?

Here's my script:

<script type="text/javascript"> 

var maxImages = 99; 
var myImages = new Array(); 
// 
var imgPath = "/bpa-images/Home Slideshow/"; 
var imgPrefix = "image"; 
var imgSuffix = ".jpg"; 
// 
function preloadComplete() 
{ 
    this.complete = true; 
} 
function preloadError() 
{ 
    this.complete = false; 
} 
function preloadImages() 
{ 
    for (var x=1; x<=maxImages; ++x) 
    { 
        myImages[x] = new Image(); 
        myImages[x].onerror = preloadError; 
        myImages[x].onload = preloadComplete; 
        myImages[x].src = imgPath + imgPrefix + x + imgSuffix; 
    } 
    return true; 
} 
preloadImages();

///// Plugin variables 

playspeed=2000;// The playspeed determines the delay for the "Play" button in ms 
dotrans=1; // if value = 1 then there are transitions played in IE 
transtype='blendTrans';// 'blendTrans' or 'revealtrans' 
transattributes='23';// duration=seconds,transition=#<24 
//##### 
//key that holds where in the array currently are 
i=0; 


//########################################### 
//if random 
function SetRandom() { 
    tempimage = new Array(); 
    for(p=0; p<theimage.length; p++){ 
        for(p1=0; p1>-1; p1) { 
            tempNum = Math.floor(Math.random()*theimage.length) 
            if(!tempimage[tempNum]){ 
                tempimage[tempNum]=theimage[p]; 
                break; 
            } 
        } 
    } 
    for(p=0;p<theimage.length;p++)theimage[p]=tempimage[p]; 
} 

//if random order 
SetRandom() 


//########################################### 
window.onload=function(){ 

//preload images into browser 
preloadSlide(); 

//set transitions 
GetTrans(); 

//set the first slide 
SetSlide(0); 

//autoplay 
PlaySlide(); 
} 

//########################################### 
function SetSlide(num) { 
    //too big 
    i=num%theimage.length; 
    //too small 
    if(i<0)i=theimage.length-1; 

//switch the image 
if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Apply()') 
document.images.imgslide.src=theimage[i][0]; 
if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Play()') 

} 


//########################################### 
function PlaySlide() { 
    if (!window.playing) { 
        PlayingSlide(i+1); 
        if(document.slideshow.play){ 
            document.slideshow.play.value="   Stop   "; 
        } 
    } 
    else { 
        playing=clearTimeout(playing); 
        if(document.slideshow.play){ 
            document.slideshow.play.value="   Play   "; 
        } 
    } 
    // if you have to change the image for the "playing" slide 
    if(document.images.imgPlay){ 
        setTimeout('document.images.imgPlay.src="'+imgStop+'"',1); 
        imgStop=document.images.imgPlay.src 
    } 
} 


//########################################### 
function PlayingSlide(num) { 
    playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed); 
} 


//########################################### 
//desc: picks the transition to apply to the images 
function GetTrans() { 
    //si=document.slideshow.trans.selectedIndex; 

    if((document.slideshow.trans && document.slideshow.trans.selectedIndex == 0) || (!document.slideshow.trans && dotrans==0)){ 
    dotrans=0; 
} 
else if ((document.slideshow.trans && document.slideshow.trans.selectedIndex == 1) || (!document.slideshow.trans && transtype == 'blendTrans')){ 
    dotrans=1; 
    transtype='blendTrans'; 
    document.imgslide.style.filter = "blendTrans(duration=1,transition=1)"; 
}else{ 
    dotrans=1; 
    transtype='revealtrans'; 
    if(document.slideshow.trans) transattributes=document.slideshow.trans[document.slideshow.trans.selectedIndex].value; 
    document.imgslide.style.filter = "revealTrans(duration=1,transition=" +transattributes+ ")"; 
} 

} 
//########################################### 
function preloadSlide() { 
    for(k=0;k<theimage.length;k++) { 
        theimage[k][0]=new Image().src=theimage[k][0]; 
    } 
} 


</script> 


<!-- slide show HTML --> 
<form name="slideshow"> 

<table width="288" height="432" border="1" cellpadding="1" cellspacing="0" bordercolor="#560D1C"> 
<tr> 
    <td align="center"> 
    <a href="#" onmouseover="this.href=theimage[i][1];return false"> 
    <script type="text/javascript"> 
        document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">') 
    </script> 
    </a> 
    </td> 
</tr> 
</table> 

</form>

What am I missing?

Thanks for your time,
Lorne

astupidname

Have you tossed out the 'theimage' array? It is referenced several times within the script, and if doing without 'theimage' array you need to change those references

MrNobody

lorne17;974487 wrote:
I made the changes as you asked, it fixed my safari from bogging down. So that's good. But it doesn't show any images?? Do you know why this is?

The code I gave you was just for performing a preload to determine the names of image files on your server. This code introduced a new array name. You must change your other code to reference this new array and to examine the complete property to determine if that image file name actually exists.

lorne17

MrNobody;974585 wrote:
The code I gave you was just for performing a preload to determine the names of image files on your server. This code introduced a new array name. You must change your other code to reference this new array and to examine the complete property to determine if that image file name actually exists.

Ok now I know I'm a rookie, and I apologize, but I do see the image array references. I just don't know how to fix these? How do I change my other code to this new array and to examine the complete property to determine if that image file name actually exists? Sorry for the beginner questions. I am just new with this type of script.

Thanks,
Lorne

MrNobody

Change your code where you have specified theimage as your old array name. Make that to be myImages as the new array name. Then, if there are any missing images on your server in the sequence number range you've specified, you'll need a test such as the following to determine if that image is present or not.

if(myImages[x].complete) {
// use [COLOR="Blue"][B]myImages[x].src[/B][/COLOR] to reference the image
} else {
// [COLOR="Red"][B]myImages[x].src[/B][/COLOR] represents a missing image
}

lorne17

Ok, so I replaced all theimages with myImages. I can't see where the problem is. I can't see where it is, because I am not familiar with javascript.

Can you help pinpoint and fix this script? I REALLY appreciate it.

Thanks so much,
Lorne

<script type="text/javascript"> 

var maxImages = 99; 
var myImages = new Array(); 
// 
var imgPath = "/bpa-images/Home Slideshow/"; 
var imgPrefix = "image"; 
var imgSuffix = ".jpg"; 
// 
function preloadComplete() 
{ 
    this.complete = true; 
} 
function preloadError() 
{ 
    this.complete = false; 
} 
function preloadImages() 
{ 
    for (var x=1; x<=maxImages; ++x) 
    { 
        myImages[x] = new Image(); 
        myImages[x].onerror = preloadError; 
        myImages[x].onload = preloadComplete; 
        myImages[x].src = imgPath + imgPrefix + x + imgSuffix; 
    } 
    return true; 
} 
preloadImages();

///// Plugin variables 

playspeed=2000;// The playspeed determines the delay for the "Play" button in ms 
dotrans=1; // if value = 1 then there are transitions played in IE 
transtype='blendTrans';// 'blendTrans' or 'revealtrans' 
transattributes='23';// duration=seconds,transition=#<24 
//##### 
//key that holds where in the array currently are 
i=0; 


//########################################### 
//if random 
function SetRandom() { 
    tempimage = new Array(); 
    for(p=0; p<myImages.length; p++){ 
        for(p1=0; p1>-1; p1) { 
            tempNum = Math.floor(Math.random()*myImages.length) 
            if(!tempimage[tempNum]){ 
                tempimage[tempNum]=myImages[p]; 
                break; 
            } 
        } 
    } 
    for(p=0;p<myImages.length;p++)myImages[p]=tempimage[p]; 
} 

//if random order 
SetRandom() 


//########################################### 
window.onload=function(){ 

//preload images into browser 
preloadSlide(); 

//set transitions 
GetTrans(); 

//set the first slide 
SetSlide(0); 

//autoplay 
PlaySlide(); 
} 

//########################################### 
function SetSlide(num) { 
    //too big 
    i=num%myImages.length; 
    //too small 
    if(i<0)i=myImages.length-1; 

//switch the image 
if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Apply()') 
document.images.imgslide.src=myImages[i][0]; 
if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Play()') 

} 


//########################################### 
function PlaySlide() { 
    if (!window.playing) { 
        PlayingSlide(i+1); 
        if(document.slideshow.play){ 
            document.slideshow.play.value="   Stop   "; 
        } 
    } 
    else { 
        playing=clearTimeout(playing); 
        if(document.slideshow.play){ 
            document.slideshow.play.value="   Play   "; 
        } 
    } 
    // if you have to change the image for the "playing" slide 
    if(document.images.imgPlay){ 
        setTimeout('document.images.imgPlay.src="'+imgStop+'"',1); 
        imgStop=document.images.imgPlay.src 
    } 
} 


//########################################### 
function PlayingSlide(num) { 
    playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed); 
} 


//########################################### 
//desc: picks the transition to apply to the images 
function GetTrans() { 
    //si=document.slideshow.trans.selectedIndex; 

    if((document.slideshow.trans && document.slideshow.trans.selectedIndex == 0) || (!document.slideshow.trans && dotrans==0)){ 
    dotrans=0; 
} 
else if ((document.slideshow.trans && document.slideshow.trans.selectedIndex == 1) || (!document.slideshow.trans && transtype == 'blendTrans')){ 
    dotrans=1; 
    transtype='blendTrans'; 
    document.imgslide.style.filter = "blendTrans(duration=1,transition=1)"; 
}else{ 
    dotrans=1; 
    transtype='revealtrans'; 
    if(document.slideshow.trans) transattributes=document.slideshow.trans[document.slideshow.trans.selectedIndex].value; 
    document.imgslide.style.filter = "revealTrans(duration=1,transition=" +transattributes+ ")"; 
} 

} 
//########################################### 
function preloadSlide() { 
    for(k=0;k<myImages.length;k++) { 
        myImages[k][0]=new Image().src=myImages[k][0]; 
    } 
} 


</script> 


<!-- slide show HTML --> 
<form name="slideshow"> 

<table width="288" height="432" border="1" cellpadding="1" cellspacing="0" bordercolor="#560D1C"> 
<tr> 
    <td align="center"> 
    <a href="#" onmouseover="this.href=myImages[i][1];return false"> 
    <script type="text/javascript"> 
        documen

lorne17

I have this posted at the top of my page in the <head> tag. Do I need this at all? Or do I need to edit this?

var slideimages=new Array()
	var slidelinks=new Array()
	function slideshowimages(){
	for (i=0;i<slideshowimages.arguments.length;i++){
	slideimages[i]=new Image()
	slideimages[i].src=slideshowimages.arguments[i]
	}
	}

function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}

function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}

MrNobody

Can you supply a live link to the page as it exists on your website? It is awful hard to just look at text and spot errors. Learn how to use a script debugger and it will help you a lot. Firefox has a free debugger called Firebug. If you post a live link, then I can use Firebug on your page to find any problems.

lorne17

http://www.barleypfeiffer.com/main-backup.html

That's the live link. Let me know what you find please. Thanks for the help.

Lorne

MrNobody

OK, the first problem is that Firefox reports your page as not supplying standards compliance via a valid DOCTYPE. So make sure at least the following is the line right before your opening HTML tag:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                      "http://www.w3.org/TR/html4/loose.dtd">

The second problem is this:

Error: illegal character
Source File: http://www.barleypfeiffer.com/main-backup.html
Line: 1, Column: 17
Source Code:
MM_preloadImages(&#8216;/images/menu_on.gif&#8217;)&#8230;;initLightbox()

Those opening and closing curly apostrophes are invalid. You need to use a straight apostrophe in both positions.

The third problem is that you still have references to theimage instead of myImages.

Lastly, I see that you need to change these:

function preloadComplete() 
{ 
    this.complete = true; 
} 
function preloadError() 
{ 
    this.complete = false; 
}

to these because the complete property is read-only.

function preloadComplete() 
{ 
    this.completed = true; 
} 
function preloadError() 
{ 
    this.completed = false; 
}

Note that all of this was determined just by looking at the error message being reported by the browser. I did not have to use a script debugger at all (yet). So, it would behoove you to check your error messages, and correct them, before throwing up your hands and just saying "it don't work."