...

View Full Version : Random photo + rotation query.



jonboyuk
08-31-2011, 02:16 PM
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?



<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

Philip M
08-31-2011, 04:48 PM
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.



<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.




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)

jonboyuk
08-31-2011, 05:33 PM
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!



<!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>

Philip M
08-31-2011, 05:46 PM
Sorry! Entirely my fault! :o 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.

jonboyuk
09-01-2011, 09:14 AM
Haha, not a problem. That fixed it, and it works perfectly!!! Many thanks Philip :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum