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

    javascript slideshow

    i created a php code that saves in an array to names on the photos from a directory,next i would like to create a javascript slideshow that uses the array,not to load photos manually.i have and upload function on other page so it would be perfect to slideshow dynamically.any ideas?p.s i'm new to html,php,javascript
    found this: where "altele/" is directory name and result is the array,but it doesn`t work
    var curimg=0
    function rotateimages(){
    document.getElementById("slideshow").setAttribute("src", "altele/"+result[curimg])
    curimg=(curimg<result.length-1)? curimg+1 : 0
    }

    window.onload=function(){
    setInterval(rotateimages(), 2500)
    }

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,623
    Thanks
    0
    Thanked 645 Times in 635 Posts
    setInterval(rotateimages, 2500)

    otherwise the function runs straight away and the setInterval tries to run what the function returns at the specified interval.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    still no slideshow,it just shows the source image that i set

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,076
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Quote Originally Posted by alex90 View Post
    still no slideshow,it just shows the source image that i set
    Works OK for me. Check your attempt against this.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title> Untitled </title>
    
    <style type="text/css">
     #slideshow { margin: 50px 200px; }
    </style>
    
    </head>
    <body>
    <img id="slideshow">
    
    <script type="text/javascript">
    var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
    var result = ['11.jpg','12.jpg','13.jpg','14.jpg','15.jpg'];
    
    var curimg = 0
    function rotateimages(){
      curimg=(curimg<result.length-1) ? curimg+1 : 0
      document.getElementById("slideshow").setAttribute("src", baseURL+result[curimg])
    }
    
    window.onload=function(){
      document.getElementById('slideshow').src = baseURL+result[curimg];
      setInterval(rotateimages, 2500)
    } 
    </script>
    
    </body>
    </html>
    Note: I did not have access to your image directory, so I used mine.
    Change the 'baseURL' and result array filenames for your version.


  •  

    Tags for this Thread

    Posting Permissions

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