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

[MrNobody]

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]

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

[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]

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 myImages[x].src to reference the image
} else {
// myImages[x].src represents a missing image
}