On Sun, 19 Dec 2004 00:02:18 -0500,
Mi***************@webtv.net
(Michael Burtenshaw) wrote:
I would like to make a slide show using random images. The problem is my
host is 250.com, and they don't support cgi-programs. Is there another
way to accomplish random images?
Michael,
I have been working on a client-side script to automatically loop
though mulitple sets of images. Each slide is name with a sequential
number such as myImage1.jpg, myImage2.jpg myImage3.jpg. This
lets me us a "for loop" in the preload images into an Array, then I
can sequential step through the images by incrementing the counter
(currImg++). To randomly select the next image use....
currImg = Math.round(Math.random()*maxImg)
Here is a greatly simplified example of my script. I have stripped
off a lot of functions/buttoms, such First, Last, Prev, FrameRate and
the ability for the user to select different set of images.
Good Luck,
Ron Beitel
//***** SlideShow_Random.html ******
<html>
<head>
// ron beitel, 20 Dec 2004
<script language="JavaScript">
var delay = 500 // 1000 is 1 sec.
var currImg = 0 // index to the current image
var maxImg = 25 // default number of images (0 to 24)
var tid // timeout Id
var pix = new Array()
function preloadImgSet(max) {
for (i=0;i<max;i++) {
pix[i] = new Image()
pix[i].src = "http://250.com/yourPath/image_" + i + ".jpg"
}
nxtSlide()
}
function nxtSlide() {
clearTimeout(tid)
currImg = Math.round(Math.random()*maxImg)
document.images.Slide.src = pix[currImg].src
tid = setTimeout('nxtSlide()', delay)
}
function loop() {
tid = setTimeout('nxtSlide()', delay)
}
function stop() {
clearTimeout(tid)
}
function next() {
currImg = Math.round(Math.random()*maxImg)
document.images.Slide.src = pix[currImg].src
}
</script>
</head>
<body onLoad="preloadImgSet(maxImg)">
<table border>
<tr><td colspan=2 align=center>
<h2>My Slide Show</h2>
<h3>Loop or Step Randomly</h3>
</td></tr>
<tr><td><table border="0" cellpadding="0" cellspacing="0">
<tr><td align="center">
<img src="" name='Slide'>
</td></tr>
<tr align="center"><td>
<form name="buttons">
<input type="button" value="Loop" onclick="loop()"/>
<input type="button" value="Stop" onclick="stop()"/>
<input type="button" value="Next" onclick="next()"/>
</form>
</td></tr>
</table></td></tr>
</table>
</body>
</html>
