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

    Random photo + rotation query.

    Dear all, I'm trying to use Javascript to have an array of images that load randomly AND work in a slideshow manner so change every 3 seconds (in a logical order).

    The code I have below presents a random image but how do I get them to continue from the random image and change to the next every 3 seconds?

    Code:
    <script language="JavaScript">
    images = new Array(3);
    
    images[0] = "<a href = 'photo1.html'><img src='images/photo1.jpg' alt='Photo 1'></a>";
    
    images[1] = "<a href = 'photo2.html'><img src='images/photo2.jpg' alt='Photo 2'></a>";
    
    images[2] = "<a href = 'photo3.html'><img src='images/photo3.jpg' alt='Photo 3'></a>";
    
    index = Math.floor(Math.random() * images.length);
    
    document.write(images[index]);
    </script>
    Kind regards
    Jon

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    You cannot use document.write() to update your page as document.write statements must be run before the page finishes loading. Any document.write statement that runs after the page finishes loading will create a new page and overwrite all of the content of the current page.


    Code:
    <body onload = "rotate()">
    
    <div id = "imageDiv"></div>
    
    <script type = "text/javascript">
    
    var images = [];
    images[0] = "<a href = 'photo1.html'><img src='images/photo1.jpg' alt='Photo 1'></a>";
    images[1] = "<a href = 'photo2.html'><img src='images/photo2.jpg' alt='Photo 2'></a>";
    images[2] = "<a href = 'photo3.html'><img src='images/photo3.jpg' alt='Photo 3'></a>";
    
    function rotate() {
    index = Math.floor(Math.random() * images.length);
    document.getElementById("imageDiv").innerHTML = images[index];
    window.setTimeout(rotate,3000);  // 3 seconds
    }
    
    </script>
    If you have only three images it would be better to show them sequentially (but starting with a random index value) rather than in random order, as otherwise there is a high probability that the same image will repeat.


    Code:
    var index = Math.floor(Math.random() * images.length);
    function rotate() {
    document.getElementById("imageDiv").innerHTML = images[index];
    index ++;
    if (index > images.length-1) {index = 0}
    window.setTimeout(rotate,3000);
    }
    “Pessimist: One who, when he has the choice of two evils, chooses both.”
    Oscar Wilde (Irish Poet, Novelist, Dramatist and Critic, 1854-1900)
    Last edited by Philip M; 08-31-2011 at 06:49 PM. Reason: Correction - see below

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Many thanks, I completely agree, as it will only be a small number of images (up to say, five), I will have them sequential but with a random index.

    I've taken the code and tried to implement it with my own values but all I seem to get is an empty page :-/ I realise I might get shot for pasting this, so apologies in advance, but where have I gone wrong?

    Thanks very much for your help!

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TEST</title>
    <link href="scheme_a.css" rel="stylesheet" type="text/css">
    </head>
    
    <body onload = "rotate()">
    
    <div class="container">
      <div class="navcontainer">
      <ul id="navlist">
    <li id="active"></li>
    <li><a href="index.html" id="current">Home</a></li>
    <li><a href="projects/projects.html">Projects</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="directors/directors.html">Directors</a></li>
    <li><a href="contact.html">Contact</a></li>
      </ul>
      </div>
      <div class="content">
        <p>
    <div id = "imageDiv"></div>
    
    <script type = "text/javascript">
    
    images = new Array[];
    images[0] = "<a href = 'photo1.html'><img src='images/frontA.jpg' alt='Photo 1'></a>";
    images[1] = "<a href = 'photo2.html'><img src='images/frontB.jpg' alt='Photo 2'></a>";
    images[2] = "<a href = 'photo3.html'><img src='images/frontC.jpg' alt='Photo 3'></a>";
    
    var index = Math.floor(Math.random() * images.length);
    function rotate() {
    document.getElementById("imageDiv").innerHTML = images[index];
    index ++;
    if (index > images.length-1) {index = 0}
    window.setTimeout(rotate,3000);
    }
    
    </script>
    </p>
    </div>
      <div class="footer">
        <p class="footertext"></p>
      </div>
    </div>
    </body>
    </html>

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Sorry! Entirely my fault! Brain hit a bad sector!

    Change
    images = new Array[];
    to
    var images = [];

    I don't really know how that happened. An unsuccessful attempt at editing! var images = [] is the modern way to declare an array.
    Last edited by Philip M; 08-31-2011 at 06:51 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Haha, not a problem. That fixed it, and it works perfectly!!! Many thanks Philip


  •  

    Posting Permissions

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