...

View Full Version : Random image cycle question



quandry
06-14-2008, 12:25 AM
Hello,

I'm relatively new to Javascript, and I'm trying to put together a slideshow of images that updates with a random image every 10-20 seconds.

I found one script that did this here: http://javascript.internet.com/miscellaneous/random-image-rotator.html, but unfortunately the script preloads all the images, and as I have about 100 of them this isn't practical!

Is there a way to do the same thing without preloading any images, and without refreshing the page?

Thanks in advance!

Philip M
06-14-2008, 07:35 AM
You could show the first image always the same while the remainder load, or randomly select the first image from (say) five, again while the remaining 95 load.

rnd me
06-14-2008, 07:51 AM
<html>
<head>
<title>random cows</title>
</head>
<body onload="newPic()">

<img id="view" />

<script>//a wee bit of support code
function Rnd(w) {return parseInt(Math.random() * (w + 1));}
Array.prototype.random=function () {return this[Rnd(this.length - 1)];}


//the images urls in csv format:
myImageList = "http://www.usda.gov/oc/photo/01c0227.jpg,http://www.usda.gov/oc/photo/01c0229.jpg,http://www.usda.gov/oc/photo/01c0230.jpg,http://www.usda.gov/oc/photo/01c0235.jpg,http://www.usda.gov/oc/photo/01c0236.jpg,http://www.usda.gov/oc/photo/01c0237.jpg,http://www.usda.gov/oc/photo/01c0238.jpg,http://www.usda.gov/oc/photo/01c0240.jpg,http://www.usda.gov/oc/photo/01c0243.jpg,http://www.usda.gov/oc/photo/01c0246.jpg,http://www.usda.gov/oc/photo/01c0249.jpg,http://www.usda.gov/oc/photo/01c1399.jpg,http://www.usda.gov/oc/photo/01c1400.jpg,http://www.usda.gov/oc/photo/01c1404.jpg,http://www.usda.gov/oc/photo/01c1405.jpg,http://www.usda.gov/oc/photo/01c1341.jpg,http://www.usda.gov/oc/photo/01c1345.jpg,http://www.usda.gov/oc/photo/01c1356.jpg,http://www.usda.gov/oc/photo/01c1378.jpg,http://www.usda.gov/oc/photo/01c1380.jpg"

function newPic(){
document.getElementById("view").src= imgArray.random();
setTimeout(newPic, Rnd(10)+10 * 1000);
}

imgArray= myImageList.split(/\,\s*/g); //turn text list into js array

</script>
</body>
</html>

vwphillips
06-14-2008, 12:11 PM
rnd me

I was going to answer this on webdeveloper but saw your post
but would suggest to prevent the random image being the current image


function newPic(){
var imgobj=document.getElementById("view");
var nimg=imgArray.random();
if (imgobj.src==nimg) return newPic();
imgobj.src=nimg;
setTimeout(newPic, Rnd(10)+10 * 1000);
}


http://www.webdeveloper.com/forum/showthread.php?p=899200#post899200

quandry
06-14-2008, 02:05 PM
Thank you all for your help! That's exactly what I'm looking for!

I'm also having difficulty embedding this into an HTML table - It seems to default to the top left hand of the page!

Can anybody help me out here also?

Many thanks!

vwphillips
06-14-2008, 02:21 PM
best to post a link to your page or the code

quandry
06-14-2008, 02:30 PM
Well, the code is as you and rnd me suggested above, only I wish to put that into an HTML table. So far, I tried:

<div align="center">
<p>&nbsp;</p>
<p>&nbsp;</p>
<table width="555" height="465" border="0" cellspacing="0">
<tr>
<td height="355" bgcolor="#CCCCCC"><div align="center"><br>
<br>

<script>//a wee bit of support code
function Rnd(w) {return parseInt(Math.random() * (w + 1));}
Array.prototype.random=function () {return this[Rnd(this.length - 1)];}


//the images urls in csv format:
myImageList = "http://www.usda.gov/oc/photo/01c0227.jpg,http://www.usda.gov/oc/photo/01c0229.jpg,http://www.usda.gov/oc/photo/01c0230.jpg,http://www.usda.gov/oc/photo/01c0235.jpg,http://www.usda.gov/oc/photo/01c0236.jpg,http://www.usda.gov/oc/photo/01c0237.jpg,http://www.usda.gov/oc/photo/01c0238.jpg,http://www.usda.gov/oc/photo/01c0240.jpg,http://www.usda.gov/oc/photo/01c0243.jpg,http://www.usda.gov/oc/photo/01c0246.jpg,http://www.usda.gov/oc/photo/01c0249.jpg,http://www.usda.gov/oc/photo/01c1399.jpg,http://www.usda.gov/oc/photo/01c1400.jpg,http://www.usda.gov/oc/photo/01c1404.jpg,http://www.usda.gov/oc/photo/01c1405.jpg,http://www.usda.gov/oc/photo/01c1341.jpg,http://www.usda.gov/oc/photo/01c1345.jpg,http://www.usda.gov/oc/photo/01c1356.jpg,http://www.usda.gov/oc/photo/01c1378.jpg,http://www.usda.gov/oc/photo/01c1380.jpg"

function newPic(){
var imgobj=document.getElementById("view");
var nimg=imgArray.random();
if (imgobj.src==nimg) return newPic();
imgobj.src=nimg;
setTimeout(newPic, Rnd(10)+10 * 1000);
}

imgArray= myImageList.split(/\,\s*/g); //turn text list into js array

</script>
</div>
</td>
</tr>
<tr>
<td height="61" align="center" valign="middle" bgcolor="#CCCCCC"><div align="center" class="style1"><br>
<br>
<br>
</div></td>
</tr>
</table>

...But this doesn't seem to do it! Any ideas?

vwphillips
06-14-2008, 03:08 PM
<!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" xml:lang="en" lang="en">

<head>
<title></title>
<script>//a wee bit of support code
function Rnd(w) {return parseInt(Math.random() * (w + 1));}
Array.prototype.random=function () {return this[Rnd(this.length - 1)];}


//the images urls in csv format:
myImageList = "http://www.vicsjavascripts.org.uk/StdImages/One.gif,http://www.vicsjavascripts.org.uk/StdImages/Two.gif,http://www.vicsjavascripts.org.uk/StdImages/Three.gif,http://www.vicsjavascripts.org.uk/StdImages/Four.gif"

function newPic(){
var imgobj=document.getElementById("view");
var nimg=imgArray.random();
if (imgobj.src==nimg) return newPic();
imgobj.src=nimg;
setTimeout(newPic, Rnd(10)+10 * 1000);
}

imgArray= myImageList.split(/\,\s*/g); //turn text list into js array

</script>
</head>

<body onload="newPic();">
<div align="center">
<p>&nbsp;</p>
<p>&nbsp;</p>
<table width="555" height="465" border="0" cellspacing="0">
<tr>
<td height="355" bgcolor="#CCCCCC"><div align="center"><br>
<br>

</td>
</tr>
<tr>
<td height="61" align="center" valign="middle" bgcolor="#CCCCCC">
<div align="center" class="style1"><br>
<img id="view" src="One.gif" width="100" height="100" />
<br>
<br>
</div>
</td>
</tr>
</table>
</div>
</body>

</html>

quandry
06-14-2008, 03:11 PM
Oh fantastic! Thank you for your help - that's saved me hours of headaches!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum