Web Analytics Made Easy - StatCounter Random photo + rotation query. - CodingForum

Announcement

Collapse
No announcement yet.

Random photo + rotation query.

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    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
    Tags: None
  • #2
    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; Aug 31, 2011, 12: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.

    Comment

    • #3
      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>

      Comment

      • #4
        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; Aug 31, 2011, 12: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.

        Comment

        • #5
          Haha, not a problem. That fixed it, and it works perfectly!!! Many thanks Philip

          Comment

          Previous template Next
          Working...
          X
          😀
          🥰
          🤢
          😎
          😡
          👍
          👎