Two image sliders on the same page?

[georgem747]

Hi,

Novice JavaScript user here and was wondering if there is a way to add two image slideshows on the same page, i tried using the code below but when i added the second one they wouldn't rotate anymore.

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


// Format: theimage[...]=[image URL, link URL, name/description]
theimage[0]=["https://www.signup4.net/Upload/BCDM10A/20124611E/SlideA.jpg", "www.google.com", "slide A"];
theimage[1]=["https://www.signup4.net/Upload/BCDM10A/20124611E/SlideB.jpg", "www.yahoo.com", "slide B"];

///// Plugin variables

playspeed=4000;// The playspeed determines the delay for the "Play" button in ms
//#####
//key that holds where in the array currently are
i=0;


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

    //preload images into browser
    preloadSlide();

    //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
    document.images.imgslide.src=theimage[i][0];

}


//###########################################
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);
}


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


</script>



<form name="slideshow">

<table border="1" cellpadding="2" 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>

[rtrethewey]

The script you posted would have to be re-written to allow multiple slideshows. But there are scripts out there that will allow it. Search on "multiple slideshows" and you should find several.