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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Need help with an Image selection script

    Hello, this is my first post, and it looks like there's no better place to find an answer.

    My problem is this:
    I made a photoalbum that allows you to browse our photos both backwards and forwards. Also, when you select a thumbnail, the larger image is displayed above. Here's the page as it is now:
    http://www.rtaautomation.com/photoalbum

    For awhile, we just had three images and the script worked great. But now, I need to add more pictures, but the script doesn't seem to allow you to go past the third image. If you manually select the 4th image, you're able to go backwards, but something isn't allowing the user to go forward and view all the images. Here is the code:

    Code:
    // List image names without extension
    var myImg= new Array(3)
      myImg[0]= "pix1";
      myImg[1]= "pix2";
      myImg[2]= "pix3";
      myImg[3]= "pix4";
    // 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>1){
        var l = i
      } else {
        var l = i+=1;
      }
      document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
    }
    // Load function after page loads
    window.onload=loadImg;
    Anybody see what might be causing the problem?

    Thanks!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,919
    Thanks
    79
    Thanked 4,423 Times in 4,388 Posts
    I saw this code at the time and didn't like it. Almost told you about it then. Guess I should have.

    Here:
    Code:
    // don't give a size for the image array...let it be self-sizing:
    var myImg= [ 
       "pix1",
       "pix2",
       "pix3",
       "pix4",
       "pix5"
       ];
    
    // use a more meaningful variable name...
    // one that is not likely to be used for other purposes 
    var currentImage = 0;
    
    // Create function to load image
    function loadImg()
    {
        // this is the only place where "images/" and ".jpg" are used, 
        // so why bother with the global variables???
        document.imgSrc.src = "images/ + myImg[currentImage] + ".jpg";
    }
    
    // Create link function to switch image backward
    function prev()
    {
        currentImage = ( currentImage + myImg.length - 1 ) % myImg.length;
        loadImg( );
    }
    // Create link function to switch image forward
    function next()
    {
        currentImage = ( currentImage + 1 ) % myImg.length;
        loadImg( );
    }
    
    
    // Load function after page loads
    window.onload=loadImg;
    NOTE: This will give you a circular slide show. If the user clicks next when last image is showing, it will go back to the first image. If the user clicks prior when first image is showing, it will go to the last image.

    If you don't want a circular show, just ask.

  • Users who have thanked Old Pedant for this post:

    NJacobi (05-15-2009)

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks a bunch, I'll give it a try sometime tonight. I'm assuming it's going to work, so thanks a bunch for the time saver.


  •  

    Posting Permissions

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