HI All,
I need help with reloading Random Image every 10 seconds. Following are the code that I have which loads Random Image from the Directory (this part is working fine), when I refresh the page. But now I want change it so it would reload random image every 10 seconds. Any help will be appriciaged.
<?php
// PHP section
// set some variables
// Image directory! fill in! relative to root
$imageDir = '/slides/';
define('SERVERPATH', $_SERVER['DOCUMENT_ROOT'].$imageDir);
define('HTTPPATH', 'http://'.$_SERVER['HTTP_HOST'].$imageDir);
// read the names of images from the image directory
$dir = opendir(SERVERPATH);
$javascriptArray = null;
$i = null;
while (false !== ($file = readdir($dir))) {
if (eregi('\\.(gif|png|jpg)$', $file)){
$javascriptArray .= $i.'"'.HTTPPATH.$file.'"';
$i = ',';
}
}
closedir($dir);
// Html section
?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Rotate Images</title>
<script type="text/javascript">
rotatingImages = new Array(<?php echo $javascriptArray; ?>);
imageCount = rotatingImages.length;
firstTime = true;
duration = "3"; //seconds
function rotateImage(){
// Cycle through images sequencially starting with a random image
// Do not update the image if loading is not yet completed
if (document.getElementById('rotatingImage').complete || firstTime){
if (firstTime) {
thisImage = Math.floor((Math.random() * imageCount))
firstTime = false
}else{
thisImage++
if (thisImage == imageCount) {
thisImage = 0
}
}
document.getElementById('rotatingImage').src = rotatingImages[thisImage]
setTimeout("rotateImage()", duration * 1000)
}
}
</script>
<style type="text/css">
#slideshow{
width:164px;
height:124px;
border-top:2px solid #997;
border-right:2px solid #997;
border-bottom:2px solid #664;
border-left:2px solid #664;
}
#rotatingImage{
display:block;
width:160px;
height:120px;
border-top:2px solid #664;
border-right:2px solid #664;
border-bottom:2px solid #997;
border-left:2px solid #997;
}
</style>
</head>
<body>
<div id="slideshow">
<img id="rotatingImage" src="" alt="">
</div>
<script type="text/javascript">
rotateImage();
</script>
</body>
</html>
It reads all the images in a directory and then uses javascript to run them as a slide show. It starts on a random image from the javascript array and then rotates from there. If you want to randomise the order you could use PHP’s shuffle(). You could make it more responsive by preloading the images.
Another method you may want to try is by creating a flash movie for the slideshow that then uses flash’s ability to get variables from an external file. Javascript is probably the best route, but it’s another way.
for some reason i receive an error taht leads me to this line of code"
define(‘SERVERPATH’, $_SERVER[‘DOCUMENT_ROOT’].$imageDir);
All it does is echos out an error:
warning readdir() expects parameter 1 to be resource … blah blah.php line 15
I dont know why that is and have googled the error to find that google tries to correct my spelling, it suggests ‘SERVER_PATH’ … is it because im running windows 7 Ultimate on my localhost using XAMPP as my php server ?
Thanx for the reply, much appreciated, i did how ever figure it out it was the path like you said lol.
I took the part of your directory script and used some other code i have to get the result i needed.
Images fade through to next image, form directory on web server, with image upload in admin side. very nice must admit
If i wanted to say fill the java array with data from mysql i could replace the directory portion to connect to mysql and select image names from table … like … “select from imgtable where imges are not null or equal to nothing” then use that result to populate the array in java like you did with directory via php.
Thanks for the script. It’s a great way to ensure the images don’t repeat, but rotate through the entire folder.
Do you know of a way to add links to each photo that would come up? I have about 15 photos that each link to a different page that I need to have rotate every 10 seconds. Your script works beautifully except I don’t know how to associate the links to the pictures. Would a table in a database be a better solution?