PDA

View Full Version : Random Image from folder



big-dog1965
09-01-2007, 05:46 AM
I am looking to add a random image to a webpage. I would like it to beable to pull a image from a folder that could contain any file name.jpg even .gif also. I found this comment on here but no code or further post about it
see site at wichitarcraceway (http://wichitarcraceway.com) it the pictures on front page that iam dealing with.

A better idea would be to:

1. have a folder that contained the images.
2. a routine to get the number of items in the folder.
3. generate a random number based on the number of items.
4. get the Nth(random item) file in the folder.
5. verify that its an image file (if not get another one or the next on n+1)
6. pass the path and item name to the display routine.
7. the display routine also needs to size the image.

then you could just add new images to the folder and not have to rewrite the script each time.

any help would be great

Heres another I tried to use but renaming the files is not very productive. The problem is that the images are in a differant folder than the webpage, images/random maybe someone could help with this also
<script language="JavaScript">
<!--

/*
Random Image Script- By JavaScript Kit (http://www.javascriptkit.com)
Over 400+ free JavaScripts here!
Keep this notice intact please
*/

function random_imglink(){
var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="image1.jpg"
myimages[2]="image2.jpg"
myimages[3]="image3.jpg"
myimages[4]="image4.jpg"
var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
*/I tried <img src="../image/random/'
*/<img src="../image/random"'
*/<img src="image/random"'
document.write('<img src="'+myimages[ry]+'" border=0>')
}
random_imglink()
//-->
</script>

jscheuer1
09-01-2007, 02:39 PM
If you have PHP available on your host, this should work out (the below page must use the .php extension):

somepage.php
____________________

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<script type="text/javascript">
/*
Random Image Script- By JavaScript Kit (http://www.javascriptkit.com)
Over 400+ free JavaScripts here!
Keep this notice intact please
*/
function random_imglink(){

<?php
function returnimages($dirname="./images/") {
$pattern="\.(jpg|jpeg|png|gif|bmp)$";
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){
echo 'myimages[' . $curimage .']="' . $dirname . $file . '";' . "\n";
$curimage++;
}
}

closedir($handle);
}
return($files);
}

echo "var myimages=new Array();" . "\n";
returnimages();
?>

var ry=Math.floor(Math.random()*myimages.length)
document.write('<img src="'+myimages[ry]+'" border=0>')
}
random_imglink()
</script>
</body>
</html>

The images go in a folder named images off of the folder that contains the above page.

big-dog1965
09-01-2007, 04:36 PM
John That is great, If Theres a way to have a option of have 1 picture or 2 pictures side by side would be even better, either way great job and THANKS
I did try and change the ./images asuming that was where it was getting the images from to a http://website.com/webgalery/users/images thinking I would not even have to copy the files at all but didnt work.

jscheuer1
09-02-2007, 01:47 AM
Depending upon how the server is configured, generally PHP can only pull images from a relative path on the same server. For example, you could change ./images to ../myimagefolder - which would then pull the images from a folder named myimagefolder that was off of the same folder as the folder that the page is in is off of.

Anyways, to answer your other question, to get two random images side by side, replace:


var ry=Math.floor(Math.random()*myimages.length)
document.write('<img src="'+myimages[ry]+'" border=0>')

with:


myimages.sort(function() {return 0.5 - Math.random();});
document.write('<img src="'+myimages[0]+'" border=0><img src="'+myimages[1]+'" border=0>');

alexjewell
09-02-2007, 12:11 PM
You could just do the whole thing with PHP and eliminate JavaScript from the picture entirely...

jscheuer1
09-02-2007, 01:46 PM
You could just do the whole thing with PHP and eliminate JavaScript from the picture entirely...

I was thinking that. However, my knowledge of PHP is rather limited. So how would one do:


myimages.sort(function() {return 0.5 - Math.random();});
document.write('<img src="'+myimages[0]+'" border=0><img src="'+myimages[1]+'" border=0>');

via PHP?

Or, for that matter, since the myimages array presumably wouldn't be of any value on the server side, just how exactly would you suggest it be done?

big-dog1965
09-04-2007, 07:44 PM
Thanks that works for 2 pictures