www.webdeveloper.com
Results 1 to 2 of 2

Thread: Two image sliders on the same page?

  1. #1
    Join Date
    Nov 2012
    Posts
    1

    Post Two image sliders on the same page?

    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.

    Code:
    <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>

  2. #2
    Join Date
    Mar 2011
    Posts
    1,136
    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.
    Rick Trethewey
    Rainbo Design

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles