Duplicate Javascript slideshows, help needed

Discussion in 'HTML & Website Design' started by LostInCode09, Nov 7, 2008.

0
  1. #1
    Hello,

    just started creating a website that has two javascript slideshows on it, they need to run at the same time as one relates to the other.

    Set up the first one and it worked fine, when I added the same script to use for the second slideshow both didn't work.

    After much research and hard work I have now got the first one working, while the other remains on the original image.

    So why question is how do I get the second one to work as well, I have read information on duplicate variables and functions and have tried to fix this but still I cant get it to work. The code I have used is below, would greatly appreciate it if someone could help me out on what I haven't changed that I need to.

    <script type="text/javascript">
    <!--
    var interval = 9000;
    var random_display = 0;
    var imageDir = "pictures/";
    var imageNum = 0;
    imageArray = new Array();
    imageArray[imageNum++] = new imageItem(imageDir + "Pic_6_Guided_walking_tours_Kenyanew.jpg");
    imageArray[imageNum++] = new imageItem(imageDir + "Pic_7_Masai_Mara_walking_safarisnew.jpg");
    imageArray[imageNum++] = new imageItem(imageDir + "Pic_2_Walking_Safari_Crater_Lake_Kenyanew.jpg");
    imageArray[imageNum++] = new imageItem(imageDir + "Pic_4_Walking_Safari_Crescent_Island_Kenyanew.jpg");
    imageArray[imageNum++] = new imageItem(imageDir + "Pic_1_Photo_safaris__Crater_Lake_Kenyanew.jpg");
    imageArray[imageNum++] = new imageItem(imageDir + "Pic_3__Wildlife_Safari_Masai_Mara_Kenyanew.jpg");
    imageArray[imageNum++] = new imageItem(imageDir + "Pic_5_Bird_watching_safaris_Kenyanew.jpg");
    var totalImages = imageArray.length;
    function imageItem(image_location) {
    this.image_item = new Image();
    this.image_item.src = image_location;
    }
    function get_ImageItemLocation(imageObj) {
    return(imageObj.image_item.src)
    }
    function randNum(x, y) {
    var range = y - x + 1;
    return Math.floor(Math.random() * range) + x;
    }
    function getNextImage() {
    if (random_display) {
    imageNum = randNum(0, totalImages-1);
    }
    else {
    imageNum = (imageNum+1) % totalImages;
    }
    var new_image = get_ImageItemLocation(imageArray[imageNum]);
    return(new_image);
    }


    function switchImage(place) {
    var new_image = getNextImage();
    document[place].src = new_image;
    var recur_call = "switchImage('"+place+"')";
    timerID = setTimeout(recur_call, interval);
    }


    // -->
    </script>
    <script type="text/javascript">
    <!--
    var interval2 = 9000;
    var random_display2 = 0;
    var imageDir2 = "pictures/";
    var imageNum2 = 0;
    imageArray2 = new Array();
    imageArray2[imageNum2++] = new imageItem2(imageDir + "pic6side.jpg");
    imageArray2[imageNu2m++] = new imageItem2(imageDir + "pic7side.jpg");
    imageArray2[imageNum2++] = new imageItem2(imageDir + "pic2side.jpg");
    imageArray2[imageNum2++] = new imageItem2(imageDir + "pic4side.jpg");
    imageArray2[imageNum2++] = new imageItem2(imageDir + "pic1side.gif");
    imageArray2[imageNum2++] = new imageItem2(imageDir + "pic3side.gif");
    imageArray2[imageNum2++] = new imageItem2(imageDir + "pic5side.jpg");
    var totalImages2 = imageArray.length;
    function imageItem2(image_location) {
    this.image_item = new Image();
    this.image_item.src = image_location;
    }
    function get_ImageItemLocation2(imageObj) {
    return(imageObj.image_item.src)
    }
    function randNum2(x, y) {
    var range2 = y - x + 1;
    return Math.floor(Math.random() * range2) + x;
    }
    function getNextImage2() {
    if (random_display2) {
    imageNum2 = randNum2(0, totalImages2-1);
    }
    else {
    imageNum2 = (imageNum2+1) % totalImages2;
    }
    var new_image2 = get_ImageItemLocation2(imageArray2[imageNum2]);
    return(new_image2);
    }


    function switchImageside(place) {
    var new_image2 = getNextImage2();
    document[place].src = new_image2;
    var recur_call = "switchImageside('"+place+"')";
    timerID = setTimeout(recur_call, interval);
    }




    // -->
    </script>




    <link href="ontdek.css" rel="stylesheet" type="text/css" />
    </head>

    <body onload="switchImage('slide'); switchImageside('side');">

    And then I call them into the images using the following.

    <div id="imagecontainerleft">
    <img id="slide" name="slide" alt="slideshow" src="pictures/Pic_6_Guided_walking_tours_Kenyanew.jpg" style="border:0"/>
    </div>

    <div id="imagecontainerright">
    <img id="side" name="side" alt="slideshow2" src="pictures/pic6side.jpg" style="border:0"/>
    </div>

    If anyone can help I will be grateful as this has already taken me most of the day.


    Many thanks in advance.
     
    LostInCode09, Nov 7, 2008 IP