Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Nov 2009
    Location
    Florida United States
    Posts
    105
    Thanks
    6
    Thanked 2 Times in 2 Posts

    Slide Show not initializing

    My slide show seem to not be initializing I used a base from webmonkey.com and tweaked it around to be exactly what I need and it won't start. Any ideas with whats wrong?
    here is my js
    Code:
    var interval = 1500; //1.5 secs
     var random_display = 0; //goes in order
     //defines where the images are stored
     var imageDir = "../image/slideshow1/";
     
     //set images here
     var imageNum = 0;
     imageArray = new Array();
     imageArray[imageNum++] = new imageItem(imageDir + "01.jpg"); 
     imageArray[imageNum++] = new imageItem(imagedir + "02.jpg");
     imageArray[imageNum++] = new imageItem(imagedir + "03.jpg");
     imageArray[imageNum++] = new imageItem(imagedir + "04.jpg");
     
     //find total amount of images using .length
     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)
    }
    
    //This is used if random is set to 1
    function randNum(x, y){
    	var range = y - x + 1;
    	return Math.floor(Math.random() * range) + x;
    }
    
    //get next image
    function getNextImage(){
    	if(random_display){
    		imageNum = randNum(0, totalImages-1);
    	} else{
    		imageNum = (imageNum+1) % totalImages;
    	}
    	//return the value now.
    	var new_image = get_ImageItemLocation(imageArray[imageNum]);
    	return (new_image);
    }
    
    function getPrevImage() {
    	imageNum = (imageNum-1) % totalImages;
    	var new_image = get_ImageItemLocation(imageArray[imageNum]);
    	return (new_image);
    }
    
    function prevImage(place) {
    	var new_image = getPrevImage();
    	document[place].src = new_image;
    }
    
    //function to switch images
    function switchImage(place){
    	var new_image = getNextImage();
    	document[place].src = new_image;
    	var recur_call = "switchImage('"+place+"')";
    	timerID = setTimeout(recur_call, interval);
    }
    Here is the html with buttons to control the slideshow
    Code:
    <div id = "articles">
        	<div class= "new_article">
        		<img name="slideImg" src="image/slideshow1/01.jpg" style = "width:400px; height:200px;" border=0>
    			<a href="#" onClick="switchImage('slideImg')">play slide show</a>
    			<a href="#" onClick="clearTimeout(timerID)"> pause</a>
    			<a href="#" onClick="prevImage('slideImg'); clearTimeout(timerID)"> previous</a>
    			<a href="#" onClick="switchImage('slideImg'); clearTimeout(timerID)">next </a>
        	</div>
    	</div>
    New Coder!!!!

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script  type="text/javascript">
    /*<![CDATA[*/
     var timerID=null;
     var random_display=false;
     var interval=1000;
    
    
     var imageNum = 0;
     imageArray = [];
     imageArray[imageNum++] = new imageItem('http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg');
     imageArray[imageNum++] = new imageItem('http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg');
     imageArray[imageNum++] = new imageItem('http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg');
     imageArray[imageNum++] = new imageItem('http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg');
    
     //find total amount of images using .length
     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)
    }
    
    //This is used if random is set to 1
    function randNum(x, y){
    	var range = y - x + 1;
    	return Math.floor(Math.random() * range) + x;
    }
    
    //get next image
    function getNextImage(){
    	if(random_display){
    		imageNum = randNum(0, totalImages-1);
    	} else{
    		imageNum = (imageNum+1) % totalImages;
    	}
    	//return the value now.
    	var new_image = get_ImageItemLocation(imageArray[imageNum]);
    	return (new_image);
    }
    
    function getPrevImage() {
    	imageNum = (imageNum-1) % totalImages;
    	var new_image = get_ImageItemLocation(imageArray[imageNum]);
    	return (new_image);
    }
    
    function prevImage(place) {
    	var new_image = getPrevImage();
    	document[place].src = new_image;
    }
    
    //function to switch images
    function switchImage(place){
    	var new_image = getNextImage();
    	document[place].src = new_image;
    	var recur_call = "switchImage('"+place+"')";
    	timerID = setTimeout(recur_call, interval);
    }
    /*]]>*/
    </script></head>
    
    <body>
    <div id = "articles">
        	<div class= "new_article">
        		<img name="slideImg" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" style = "width:400px; height:200px;" border=0>
    			<a href="#" onClick="switchImage('slideImg')">play slide show</a>
    			<a href="#" onClick="clearTimeout(timerID)"> pause</a>
    			<a href="#" onClick="prevImage('slideImg'); clearTimeout(timerID)"> previous</a>
    			<a href="#" onClick="switchImage('slideImg'); clearTimeout(timerID)">next </a>
        	</div>
    	</div>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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