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 to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple javascript loop

    Hi guys

    I have what i think is a fairly simple script used for an image gallery with a next and back button. It seems to work pretty well, but i would like to make the gallery scroll round... ie when the user reaches the last picture and presses the next button again, the first image will be displayed again - and visa versa with the first image and the back button.

    Below is my JS, can post the small amount of HTML that calls it if necessary.

    Any help MUCH appreciated, been messing around with it for ages and being the newbie i am, can't seem to find any way of doing it

    Code:
    // List image names without extension
    var myImg= new Array(6)
      myImg[0]= "performance2011";
      myImg[1]= "performance2005";
      myImg[2]= "performance2006";
      myImg[3]= "performance2007";
      myImg[4]= "performance2008";
      myImg[5]= "performance2009";
      myImg[6]= "performance2010";  
    
    // Tell browser where to find the image
    myImgSrc = "../images/";
    
    // Tell browser the type of file
    myImgEnd = ".jpg"
    
    var i = 0;
    
    // Create function to load image
    function loadImg(){
      document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
    }
    
    // Create link function to switch image backward
    function prev(){
      if(i<1){
        var l = i
      } else {
        var l = i-=1;
      }
      document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
    }
    
    
    // Create link function to switch image forward
    function next(){
      if(i>5){
        var l = i
      } else {
        var l = i+=1;
      }
      document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
    }
    
    // Load function after page loads
    window.onload=loadImg;

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Code:
    // Create link function to switch image backward
    function prev(){
      --i;
      if ( i < 0 ) i = myImg.length - 1;
      document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
    }
    
    // Create link function to switch image forward
    function next(){
      ++i;
      if ( i >= myImg.length ) i = 0;
      document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Jan 2011
    Location
    California
    Posts
    20
    Thanks
    0
    Thanked 5 Times in 5 Posts
    I'd recommend using the length of your img array instead of hardcoding in the numbers (that way you can add or subtract images from your slideshow just by adding them to the array, without having to change the functions as well). This way the functions can just check if i has passed the end of the array, and if it has then set it back to the beginning, or vice versa.

    Try changing your prev and next functions to this (not tested):

    Code:
    // Create link function to switch image backward
    function prev(){
      i -= 1;
      if (i < 0) {
    	i = myImg.length() - 1;
      }
      document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
    }
    
    // Create link function to switch image forward
    function next(){
      i += 1;
      if(i > myImg.length() - 1){
        i = 0;
      }
      document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
    }
    Edit: Just like Old Pedant said. Damn, spent too long on my reply.
    Last edited by leapinglemur55; 01-23-2012 at 11:43 PM.
    --------------------------------------------------------
    Still learning (hopefully not too obvious).

  • #4
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks guys, that worked absolutely spot on

    Quote Originally Posted by leapinglemur55 View Post
    I'd recommend using the length of your img array instead of hardcoding in the numbers (that way you can add or subtract images from your slideshow just by adding them to the array, without having to change the functions as well). This way the functions can just check if i has passed the end of the array, and if it has then set it back to the beginning, or vice versa.
    I know what you're getting at but i've gotta say, i really am knew to this - you're gonna have to spell it out for me lol

  • #5
    New Coder
    Join Date
    Jan 2011
    Location
    California
    Posts
    20
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Don't worry I'm pretty new too but the new functions that OldPedant wrote will work with an image array that's of ANY length, whereas the way you wrote yours would only work with an array of 7 elements, and you would have to edit the functions themselves each time you wanted to change the number of pictures in the slideshow.

    Old:
    Code:
    // Create link function to switch image forward
    function next(){
      if(i>5){
        var l = i
      } else {
        var l = i+=1;
      }
      document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
    }
    New (mine):
    Code:
    // Create link function to switch image forward
    function next(){
      i += 1;
      if(i > myImg.length() - 1){
        i = 0;
      }
      document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
    }
    New (OldPedant):
    Code:
    // Create link function to switch image forward
    function next(){
      ++i;
      if ( i >= myImg.length ) i = 0;
      document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
    }
    The hardcoded 5 in blue above is replaced with the length of the array, among other changes for simplification.

    Also for style, usually it's a good idea not to use letters that look like numbers or vice versa, such as l (ell) - I (i) - 1 (one) and o (ohh) - 0 (zero), as variable names, because people reading your code can easily get confused (in some fonts they look almost identical).
    Last edited by leapinglemur55; 01-26-2012 at 08:06 AM.
    --------------------------------------------------------
    Still learning (hopefully not too obvious).

  • #6
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by leapinglemur55 View Post
    Don't worry I'm pretty new too but the new functions that OldPedant wrote will work with an image array that's of ANY length, whereas the way you wrote yours would only work with an array of 7 elements, and you would have to edit the functions themselves each time you wanted to change the number of pictures in the slideshow.

    Old:
    Code:
    // Create link function to switch image forward
    function next(){
      if(i>5){
        var l = i
      } else {
        var l = i+=1;
      }
      document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
    }
    New (mine):
    Code:
    // Create link function to switch image forward
    function next(){
      i += 1;
      if(i > myImg.length() - 1){
        i = 0;
      }
      document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
    }
    New (OldPedant):
    Code:
    // Create link function to switch image forward
    function next(){
      ++i;
      if ( i >= myImg.length ) i = 0;
      document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
    }
    The hardcoded 5 in blue above is replaced with the length of the array, among other changes for simplification.

    Also for style, usually it's a good idea not to use letters that look like numbers or vice versa, such as l (ell) - I (i) - 1 (one) and o (ohh) - 0 (zero), as variable names, because people reading your code can easily get confused (in some fonts they look almost identical).
    Got it!! Thanks for all the help


  •  

    Posting Permissions

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