Load a random image from a directory, l would rather not list each file individually as l am adding more all the time, so it would be great if it would just randomly pick one out of a directory l allow it in.
Last edited by KHO on Fri Dec 23, 2005 12:33 am; edited 2 times in total
Why do you want to use CSS to do this? (you can't btw) You'll want to use something like PHP for this:
just include it where you need it.
| Code: |
<?php
// rotate.php
/*
Set $folder to the full path to the location of your images.
For example: $folder = '/user/me/example.com/images/';
If the rotate.php file will be in the same folder as your
images then you should leave it set to $folder = '.';
*/
$folder = '.';
// MIME filetypes:
$extList = array();
$extList['gif'] = 'image/gif';
$extList['jpg'] = 'image/jpeg';
$extList['jpeg'] = 'image/jpeg';
$extList['png'] = 'image/png';
// Start rotation:
$img = null;
if (substr($folder,-1) != '/') {
$folder = $folder.'/';
}
if (isset($_GET['img'])) {
$imageInfo = pathinfo($_GET['img']);
if (
isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) &&
file_exists( $folder.$imageInfo['basename'] )
) {
$img = $folder.$imageInfo['basename'];
}
} else {
$fileList = array();
$handle = opendir($folder);
while ( false !== ( $file = readdir($handle) ) ) {
$file_info = pathinfo($file);
if (
isset( $extList[ strtolower( $file_info['extension'] ) ] )
) {
$fileList[] = $file;
}
}
closedir($handle);
if (count($fileList) > 0) {
$imageNumber = time() % count($fileList);
$img = $folder.$fileList[$imageNumber];
}
}
if ($img!=null) {
$imageInfo = pathinfo($img);
$contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
header ($contentType);
readfile($img);
} else {
if ( function_exists('imagecreate') ) {
header ("Content-type: image/png");
$im = @imagecreate (100, 100)
or die ("Cannot initialize new GD image stream");
$background_color = imagecolorallocate ($im, 255, 255, 255);
$text_color = imagecolorallocate ($im, 0,0,0);
imagestring ($im, 2, 5, 5, "IMAGE ERROR", $text_color);
imagepng ($im);
imagedestroy($im);
}
}
?>
|
Last edited by JustaMin on Thu Dec 22, 2005 8:31 pm; edited 1 time in total This may help:
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>The Flickering Candle and its Accounting - Get Your Website Here!</title>
<script language="JavaScript"><!--
//Comments Section
//Jim Allen email: tjallen@pipeline.com
//The Animated Candle and Accounting and its html and javascript code are
//copyright 2001 by Thomas James Allen
//preload images
if (document.images) {
var candle=new Array();
candle[0]=new Image(); candle[0].src="images/bpanimcandle00.gif";
candle[1]=new Image(); candle[1].src="images/bpanimcandle01.gif";
candle[2]=new Image(); candle[2].src="images/bpanimcandle02.gif";
candle[3]=new Image(); candle[3].src="images/bpanimcandle03.gif";
candle[4]=new Image(); candle[4].src="images/bpanimcandle04.gif";
candle[5]=new Image(); candle[5].src="images/bpanimcandle05.gif";
candle[6]=new Image(); candle[6].src="images/bpanimcandle06.gif";
candle[7]=new Image(); candle[7].src="images/bpanimcandle07.gif";
candle[8]=new Image(); candle[8].src="images/bpanimcandle08.gif";
candle[9]=new Image(); candle[9].src="images/bpanimcandle09.gif";
}
//function to show the above images randomly and with random timing
function flicker(){
//set the max and min time between images
var maxtime = 40;
var mintime = 10;
//pick a random amount of time between the min and max
var bRand = 0;
bRand = Math.random();
bRand = Math.floor(bRand * (maxtime-mintime)) + mintime;
//pick the random image to be shown
var howmany = 10;
var cRand = 0;
cRand = Math.random();
cRand = Math.floor(cRand * howmany);
//show the randomly chosen image
document.candl.src = candle[cRand].src;
//set function to go off again in the random amount of time
mytimer = setTimeout("flicker()",bRand);
}
//-->
</script>
</head>
<body topmargin="0" marginheight="0" bgcolor="#fff8dc" onload="gettingStarted(); flicker()">
<span class="title">The Flickering Candle</span><br>
by Jim Allen<br><br>
You can use javascript to control animations. <br>
For the Flickering Candle, ten images are shown <br>
in random order, at random times.
<br><br>
<table border="1" cellpadding="75" cellspacing="0" bgcolor="#000000">
<tr><td><img src="images/bpanimcandle01.gif" name="candl"></td></tr>
</table>
<br><br>
</body>
</html>
|
| wumingsden wrote: |
This may help:
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>The Flickering Candle and its Accounting - Get Your Website Here!</title>
....
|
|
Problem with that is that you have to edit the code every time you add a new image to the directory, I think that's something that should be avoided where possible. The above PHP code doesnt require editing when new images are added, this is a benefit of using server-side code as opposed to javascript. | KHO wrote: |
| Load a random image from a directory, l would rather not list each file individually as l am adding more all the time, so it would be great if it would just randomly pick one out of a directory l allow it in. |
I'm pretty sure it can't. You should php for it, or javascript (try to get the urls out of the standard apache directory index)alright php works, l knew of the java way, but thats what l really wanted to avoid 
with the php way l can just set that to an external and use the php include funtion to link to it no prob. Thank you, this is exactly what l needed. What's wrong? It failed on my test page!
Last edited by KHO on Tue Jan 10, 2006 3:54 am; edited 1 time in total
If for some reason you need to refer in your CSS sheet to an image that changes all the time, you can do that, but you'll need PHP to help out on the back end.
Let's say in your CSS you have a line like this...
div.myimage {
background: ../images/foo.jpg;
}
Then you could write a PHP script that deletes foo.jpg, randomly chooses one of the other images in that directory and makes a copy of it named foo.jpg. Then run that PHP script as a cron job every hour or whatever.
| KHO wrote: |
| What's wrong? It failed on my test page, heres the url, it lists an error message at the top. http://kho.frih.net |
OK, follow these instructions and it will work fine. Here's what you should do:
1. Make a directory for your random images, called for example, 'rand_images'
2. Save the above code as rotate.php and upload it into the directory you created in step 1. Dont edit any of the code, just copy exactly what is in my post above
3. Put any images you want to rotate into this directory
4. Where you want the random image to appear, for example in your main index.php, copy and paste this code (adjusting the url as necessary):
| Code: |
| include_once('http://kho.frih.net/rand_images/rotate.php'); |
and you will find it works fine. You can see it in action here: http://www.justaminute.me.uk/testing/rotate.php (refresh the page to see it generate a random image)backround.php??
I think you just forgot the g :p
| Stubru Freak wrote: |
backround.php??
I think you just forgot the g :p |
Well spotted 
ok, l keep getting this wierd error that l can't copy paste over here, so look at the site and rell me what l'm doing wrong. http://kho.frih.net
Heres what l am using to include the file
<?php
include_once('http://kho.frih.net/images/kh/rotate.php');
?>
That is where the file is, | KHO wrote: |
ok, l keep getting this wierd error that l can't copy paste over here, so look at the site and rell me what l'm doing wrong. http://kho.frih.net
Heres what l am using to include the file
<?php
include_once('http://kho.frih.net/images/kh/rotate.php');
?>
That is where the file is, |
There is something wrong with the code for rotate.php I guess, it should contain this line (or something similar, not really sure):
| Code: |
| header("Content-Type: image/png"); |
| Stubru Freak wrote: |
| KHO wrote: | ok, l keep getting this wierd error that l can't copy paste over here, so look at the site and rell me what l'm doing wrong. http://kho.frih.net
Heres what l am using to include the file
<?php
include_once('http://kho.frih.net/images/kh/rotate.php');
?>
That is where the file is, |
There is something wrong with the code for rotate.php I guess, it should contain this line (or something similar, not really sure):
| Code: | | header("Content-Type: image/png"); |
|
The script is already configured to use .png, there is no need for that line. Are you sure all your images are in the correct format? | Quote: |
| Are you sure all your images are in the correct format? |
.jpg works right?Thats what i used to test it, although there is no reason .png shouldn't work. Give it a try with jpgs and see if that helps, ill have aplay and see if i can figure out why .pngs arent working 
l don't use .png, there is a big hole in windows that allows .exe files to be masked as .png, so l don't like to use them. l usually only use .jpg or .gif for an animation.
| KHO wrote: |
| l don't use .png, there is a big hole in windows that allows .exe files to be masked as .png, so l don't like to use them. l usually only use .jpg or .gif for an animation. |
It's quite obvious that you should change rotate.php then. Make sure all your images are of the same type and then change png in you rotate.php to that type.ok, when l change this line
to
it says "Fatal error: Call to undefined function: imagejpg() in /home/kho/domains/kho.frih.net/public_html/images/kh/rotate.php on line 70"
and if l don't change that line l get the same error as before with all the symbols. The only files l use are .jpg and l already canged the type to image/jpg instead of image/png what am l missing? | KHO wrote: |
ok, when l change this line
to
it says "Fatal error: Call to undefined function: imagejpg() in /home/kho/domains/kho.frih.net/public_html/images/kh/rotate.php on line 70"
and if l don't change that line l get the same error as before with all the symbols. The only files l use are .jpg and l already canged the type to image/jpg instead of image/png what am l missing? |
Sorry in both cases it's jpeg instead of jpg. So image/jpeg and imagejpeg() | KHO wrote: |
ok, when l change this line
to
it says "Fatal error: Call to undefined function: imagejpg() in /home/kho/domains/kho.frih.net/public_html/images/kh/rotate.php on line 70"
and if l don't change that line l get the same error as before with all the symbols. The only files l use are .jpg and l already canged the type to image/jpg instead of image/png what am l missing? |
Why are you changing the name of the function? The code already allows for the JPEG MIME type, there is no need to edit anything, just use whatever image format you like.
If you need to eit anything at all it is this section:
| Code: |
// MIME filetypes:
$extList = array();
$extList['gif'] = 'image/gif';
$extList['jpg'] = 'image/jpeg';
$extList['jpeg'] = 'image/jpeg';
$extList['png'] = 'image/png';
|
which defines the MIME types allowed, and as you can see, jpg is already there. | JustaMin wrote: |
| KHO wrote: | ok, when l change this line
to
it says "Fatal error: Call to undefined function: imagejpg() in /home/kho/domains/kho.frih.net/public_html/images/kh/rotate.php on line 70"
and if l don't change that line l get the same error as before with all the symbols. The only files l use are .jpg and l already canged the type to image/jpg instead of image/png what am l missing? |
Why are you changing the name of the function? The code already allows for the JPEG MIME type, there is no need to edit anything, just use whatever image format you like.
If you need to eit anything at all it is this section:
| Code: |
// MIME filetypes:
$extList = array();
$extList['gif'] = 'image/gif';
$extList['jpg'] = 'image/jpeg';
$extList['jpeg'] = 'image/jpeg';
$extList['png'] = 'image/png';
|
which defines the MIME types allowed, and as you can see, jpg is already there. |
He changed the mime type of the error image, so he has to change the function name too (it's a built-in function, not defined in the script) | Stubru Freak wrote: |
| JustaMin wrote: | | KHO wrote: | ok, when l change this line
to
it says "Fatal error: Call to undefined function: imagejpg() in /home/kho/domains/kho.frih.net/public_html/images/kh/rotate.php on line 70"
and if l don't change that line l get the same error as before with all the symbols. The only files l use are .jpg and l already canged the type to image/jpg instead of image/png what am l missing? |
Why are you changing the name of the function? The code already allows for the JPEG MIME type, there is no need to edit anything, just use whatever image format you like.
If you need to eit anything at all it is this section:
| Code: |
// MIME filetypes:
$extList = array();
$extList['gif'] = 'image/gif';
$extList['jpg'] = 'image/jpeg';
$extList['jpeg'] = 'image/jpeg';
$extList['png'] = 'image/png';
|
which defines the MIME types allowed, and as you can see, jpg is already there. |
He changed the mime type of the error image, so he has to change the function name too (it's a built-in function, not defined in the script) |
Yes but the error image is created with GD, it is of no security risk and there is no need to change it, that;s my point. You coul replace that entire section of code to point to a standard jpg error image if you wish. | JustaMin wrote: |
| Stubru Freak wrote: | | JustaMin wrote: | | KHO wrote: | ok, when l change this line
to
it says "Fatal error: Call to undefined function: imagejpg() in /home/kho/domains/kho.frih.net/public_html/images/kh/rotate.php on line 70"
and if l don't change that line l get the same error as before with all the symbols. The only files l use are .jpg and l already canged the type to image/jpg instead of image/png what am l missing? |
Why are you changing the name of the function? The code already allows for the JPEG MIME type, there is no need to edit anything, just use whatever image format you like.
If you need to eit anything at all it is this section:
| Code: |
// MIME filetypes:
$extList = array();
$extList['gif'] = 'image/gif';
$extList['jpg'] = 'image/jpeg';
$extList['jpeg'] = 'image/jpeg';
$extList['png'] = 'image/png';
|
which defines the MIME types allowed, and as you can see, jpg is already there. |
He changed the mime type of the error image, so he has to change the function name too (it's a built-in function, not defined in the script) |
Yes but the error image is created with GD, it is of no security risk and there is no need to change it, that;s my point. You coul replace that entire section of code to point to a standard jpg error image if you wish. |
So what would be the finall code? l'm still pretty new to php, but l don't see why the code didn't work in the first place, it already allowed .jpg files, and l only use three letter extensions so that all computers can view them (older versions of BSD style OS's can't understand a four digit extension) so l would rather not use .jpeg. The only files l will be using are .jpg can anyone get this script to work right for that??but is that loading it as a backround or just an image?
OK I see what you're trying to do, sorry. If you need to include the image in your code, you can just point to the script itself, thusly:
| Code: |
<td style="background-image:url(rotate.php);">whatever</td>
OR:
<td background="rotate.php">whatever</td> |
Or you could simply use:
| Code: |
| <img src="rotate.php" /> |
for a regular image in your page.
This can be seen running here:
http://www.justaminute.me.uk/testing/call_rotate.php
The code for that page is:
| Code: |
<html>
<head></head>
<body>
<table height="300" width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" valign="top" style="background-image:url(rotate.php); background-repeat:no-repeat; color:red">
Here is an example of a random image in the background using rotate.php!!!
</td>
</tr>
</table>
<p>
<form action="call_rotate.php" method="get" target="_self">
<input name="" type="submit" value="Generate Image!">
</form>
</body>
</html>
|
Alright, looks like server 2 just dropped again so l can't view, or add to mine, but this looks like what l need! l can just do add this to the body right? lt doesn't need to be in a table.
A 28 reply thread about... randomizing images? 
Ohhh man. | Marston wrote: |
| A 28 reply thread about... randomizing images? Ohhh man. |
...and what a fantastic contribution you've made to it. Cant wait for more of your gems of wisdom. 
| KHO wrote: |
| Alright, looks like server 2 just dropped again so l can't view, or add to mine, but this looks like what l need! l can just do add this to the body right? lt doesn't need to be in a table. |
yeah, you can use it absolutely anywhere, the table was just an example
