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 6 of 6
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    slideshow changed help?

    Below is the javascript for my slideshow

    Code:
    <script language="JavaScript">
    	<!-- 
    	var interval = 2000;
    	var random_display = 0;
    	var imageDir = "Images/";
    
    	var imageNum = 0;
    	imageArray = new Array();
    	imageArray[imageNum++] = new imageItem(imageDir + "img1.jpg");
    	imageArray[imageNum++] = new imageItem(imageDir + "img2.jpg");
    	imageArray[imageNum++] = new imageItem(imageDir + "img3.jpg");
    	imageArray[imageNum++] = new imageItem(imageDir + "img4.jpg");
    	imageArray[imageNum++] = new imageItem(imageDir + "img5.jpg");
    	imageArray[imageNum++] = new imageItem(imageDir + "img6.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 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 switchImage(place) {
    		var new_image = getNextImage();
    		document[place].src = new_image;
    		var recur_call = "switchImage('"+place+"')";
    		timerID = setTimeout(recur_call, interval);
            }
    
    
    
    
    	// -->
    	</script>
    I have a play button pause button, next button and previous button.

    Could I add a button that would change the "var random_display = 0"
    value to 1 thus making my slideshow random? If so how?

    Also I would like to add a go to last image in slidewhow button and a go to first image in slideshow button.

    My other buttons look like this.
    Code:
    <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>
    Thanks

  • #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 language="JavaScript">
    	<!--
    	var interval = 2000;
    	var TO;
    	var imageDir = "http://www.vicsjavascripts.org.uk/StdImages/";
    
    	var imageNum = 0;
    	imageArray = new Array();
    	imageArray[imageNum++] = new imageItem(imageDir + "One.gif");
    	imageArray[imageNum++] = new imageItem(imageDir + "Two.gif");
    	imageArray[imageNum++] = new imageItem(imageDir + "Three.gif");
    	imageArray[imageNum++] = new imageItem(imageDir + "Four.gif");
    	imageArray[imageNum++] = new imageItem(imageDir + "Five.gif");
    	imageArray[imageNum++] = new imageItem(imageDir + "Six.gif");
    
    	var totalImages = imageArray.length;
    
    	function imageItem(image_location) {
    		this.image_item = new Image();
    		this.image_item.src = image_location;
    	}
    
    function switchImage(place,mde) {
     var obj=document.getElementById(place);
     if (!obj.cnt) obj.cnt=0;
     Stop(place);
     if (typeof(mde)=='string'){
      if (mde=='random'){
        obj.cnt=randNum(0, totalImages-1);
    
      }
      else {
       var cnt=mde-=1;
       if (imageArray[cnt]) obj.cnt=cnt;
      }
     }
     else {
      if (mde==-1) obj.cnt=--obj.cnt%totalImages;
      else obj.cnt=++obj.cnt%totalImages;
      if (typeof(mde)=='boolean') TO = setTimeout(function(){ switchImage(place); }, interval);
     }
     obj.src =imageArray[obj.cnt].image_item.src;
     return false;
    }
    
    function randNum(x, y) {
    		var range = y - x + 1;
    		return Math.floor(Math.random() * range) + x;
    	}
    
    function Stop(place){
     clearTimeout(TO);
    }
    
    
    
    	// -->
    	</script></head>
    
    <body>
    <img id="slideImg" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100" />
    
    <a href="#" onClick="return switchImage('slideImg',true)">play slide show</a>
    
    <a href="#" onClick="return Stop('slideImg');"> pause</a>
    
    <a href="#" onClick="return switchImage('slideImg',-1);"> previous</a>
    
    <a href="#" onClick="return switchImage('slideImg',1);">next </a>
    <a href="#" onClick="return switchImage('slideImg','6');">goto 6 </a>
    <a href="#" onClick="return switchImage('slideImg','1');">goto 1 </a>
    <a href="#" onClick="return switchImage('slideImg','random');">random </a>
    </body>
    
    </html>
    Last edited by vwphillips; 01-27-2009 at 05:56 PM.
    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/

  • Users who have thanked vwphillips for this post:

    wakuwuaku (01-28-2009)

  • #3
    New Coder
    Join Date
    Jan 2009
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    None of these buttons work correctly, they just make the slideshow behave eratically.

    any suggestions?

  • #4
    Regular Coder
    Join Date
    Dec 2008
    Location
    Tannhäuser Gate
    Posts
    286
    Thanks
    7
    Thanked 58 Times in 57 Posts
    Code posted by vwphillips works with no problems on FF3 and IE7.

  • Users who have thanked freedom_razor for this post:

    Philip M (01-28-2009)

  • #5
    New Coder
    Join Date
    Jan 2009
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the code, my problem was that i was taking the buttons i needed and adding them to the code i already had.

    the random button does not randomise the order however, it brings up a random image to start at then the order is sequential.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by wakuwuaku View Post
    the random button does not randomise the order however, it brings up a random image to start at then the order is sequential.
    I think you have already been treated very generously - it is advisable not to look a gift horse in the mouth. This forum is intended to help people overcome specific Javascript problems, and is not a free coding service or an arm of social security.


  •  

    Posting Permissions

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