Random Image Every 10 Seconds

PHP
1

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.

<?
function randomImage($number,$dir) {
   $read = '../Project/xRand_Img/';	
   $myDirectory = opendir($read);	
      while($entryName = readdir($myDirectory)) {
          if (strtolower(substr($entryName, -3)) == "jpg") {
             $dirArray[]=$entryName;
          }
       }
    closedir($myDirectory);
	
    for($i=0;$i<$number;$i++) {
        $numImg = sizeof($dirArray);
        $numRan = rand(0,$numImg);

        $img = '<img src=' .$dir.$dirArray[$numRan]. '>';
    }

    return $img;
}
	
echo randomImage(1,'../Project/xRand_Img/');
?>
2

this is a dublicated thread its against the rules.

your Q

PHP is a server side script which get exicuted in the server then send its output
to the client.

your solution is to use Java Script, its a client side Script.

may be you can use both to get the result you want.

i hope it helps :slight_smile:

3

I agree, you would probably want to use javascript.

However, could you not use some function to loop constnatly, and wait 10 seconds between the loops?

4

hisham777 Wrote: this is a dublicated thread its against the rules

I posted this Post twice by mistake.

From your response, it appears that I would be better of using JavaScript for this process. Thanks.

5

Here’s a demo! Here’s the script:

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

6

Thanks Bokehman,

Thats exactly what I was looking for, I can use that for Banner Rotation purpose. That helps a lot. Thank you.

7

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.

8

bokehman I have copied the script that you wrote, can you please tell me where the destination path goes in the script? Thanks

9

Hi guys

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 ?

The dir is c:\XAMPP\htdocs\rotate\index.php
and in my browser it is
http://localhost/rotate/index.php

thanks for any responses to this
Michael

10

The directory needs to exist and be readable.

11

Bokeham

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.

12

I have been looking for a way to do this for a while.
Thank you very much!

13

Bokehman -

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?

Any help is much appreciated.