# Random image on refresh



## ashras99

On my Html webpage i placed one jpeg image, i want everytime when refresh a page new image is coming on that place from my gallery, images uploaded on the server. I think this can be done through any script. Please tell me how to do it and where i get the script.


----------



## oblivious69

The url at the bottom shows you a pretty painless way of displaying random pictures.

http://www.hypergurl.com/randomimage.html


----------



## Squashman

I use it on a website I created two years ago. I will check on it when I get home. Here is the website.

http://www.gbsps.org

Here is the cgi I used.
http://www.radiation.com/products/randomizer/


----------



## ashras99

thanks guys for your wonderful answers but what to do if i place these types of images in left and right of the same page and same gallery folder but the images could not be same at all. (possible when generated random same image on both sides)


----------



## ashras99

I have used the following script...please tell me is this possible that these images hyperlinked to their respected pages...


----------



## ashras99

Please tell me, is this possible to link the images in the above code to the particular URL.


----------



## Sequal7

Can you use php on your site? This is a really easy to follow tutorial if you can.

http://www.alistapart.com/articles/randomizer/


----------



## namenotfound

Sequal7 said:


> Can you use php on your site? This is a really easy to follow tutorial if you can.
> 
> http://www.alistapart.com/articles/randomizer/


I hate http://www.alistapart.com/ because all they ever do is talk.
Talk talk talk talk talk.

They don't provide any "quick" examples, you usually have to skim thru all their non-sense blabble before you get to any real example and even then it's usually not a very good example.

I mean look at the "source code" for their image randomizer. ALL those comments and tons of code, makes a HUGE filesize.

I'll reply back with the code I use on *MY* website, which is much more effecient.


----------



## namenotfound

This is what I use on *my* personal website.
If your host supports PHP then you can use this code :up:



PHP:


<?php
$rotate[] = "[URL=LOCATION_URL][IMG]IMAGE_URL[/IMG][/URL]";
$rotate[] = "[URL=LOCATION_URL][IMG]IMAGE_URL[/IMG][/URL]";
$rotate[] = "[URL=LOCATION_URL][IMG]IMAGE_URL[/IMG][/URL]";
$rotate[] = "[URL=LOCATION_URL][IMG]IMAGE_URL[/IMG][/URL]";
$number = rand(0, sizeof($rotate) - 1);

echo $rotate[$number];
?>


----------



## treydx

To answer your question, this code should work (it's untested, though).



Code:


var theImages = new Array();
var theURLs = new Array();
theImages[0] = 'boxer1.jpg'; theURLs[0] = 'home.html';
theImages[1] = 'boxer2.jpg'; theURLs[1] = 'about.html';
theImages[2] = 'boxer3.jpg'; theURLs[2] = 'blog.html';

var j = 0;
var p = theImages.length;

var preBuffer = new Array();
for (i = 0; i < p; i++)
{
	preBuffer[i] = new Image()
	preBuffer[i].src = theImages[i]
}

var whichImage = Math.round(Math.random()*(p-1));

function showImage()
{
	document.write('<a href="' +theURLs[whichImage]+ '"><img src="'+theImages[whichImage]+'"></a>');
}

But I would strongly recommend using a server-side script to do this instead of JavaScript. The way you're doing it now, it's loading 10 images for every visitor to the page every time they hit it even though only one image is being displayed. That's a lot of wasted bandwidth.


----------



## Sequal7

Well.....the troubles with both of those scripts is they are difficult to update.

Random image from the link I supplied will scan the entire folder for images, and randomly place them on the page in the area you put the include. Therfore to add or remove images, you simply add or delete images in the folder, and the script stays the same. There is no need after initially placing it on your server to change the code page.

This is by far a superior application to either the java, or the very basic php example you posted here in use on your site. The file size isn't big at all, in fact its only 4k, and comments arent a bad thing either. Very good php designers will always comment individual functions or database connections so they can quickly access errors or changes.
Comments enable you to multiuse of the scripts at any time and remember what exactly you have called or created.

What is so difficulyta bout their explination too?
You copy and paste this code and save it as random.php;


PHP:


<?php

/*

	AUTOMATIC IMAGE ROTATOR
	Version 2.2 - December 4, 2003
	Copyright (c) 2002-2003 Dan P. Benjamin, Automatic, Ltd.
	All Rights Reserved.

	http://www.hiveware.com/imagerotator.php

	http://www.automaticlabs.com/

	DISCLAIMER
	Automatic, Ltd. makes no representations or warranties about
	the suitability of the software, either express or
	implied, including but not limited to the implied
	warranties of merchantability, fitness for a particular
	purpose, or non-infringement. Dan P. Benjamin and Automatic, Ltd.
	shall not be liable for any damages suffered by licensee
	as a result of using, modifying or distributing this
	software or its derivatives.

	ABOUT
	This PHP script will randomly select an image file from a
	folder of images on your webserver.  You can then link to it
	as you would any standard image file and you'll see a random
	image each time you reload.

	When you want to add or remove images from the rotation-pool,
	just add or remove them from the image rotation folder.

	VERSION CHANGES
	Version 1.0
		- Release version

	Version 1.5
		- Tweaked a few boring bugs

	Version 2.0
		- Complete rewrite from the ground-up
		- Made it clearer where to make modifications
		- Made it easier to specify/change the rotation-folder
		- Made it easier to specify/change supported image types
		- Wrote better instructions and info (you're them reading now)
		- Significant speed improvements
		- More error checking
		- Cleaner code (albeit more PHP-specific)
		- Better/faster random number generation and file-type parsing
		- Added a feature where the image to display can be specified
		- Added a cool feature where, if an error occurs (such as no
		  images being found in the specified folder) *and* you're
		  lucky enough to have the GD libraries compiled into PHP on
		  your webserver, we generate a replacement "error image" on
		  the fly.

    Version 2.1
        - Updated a potential security flaw when value-matching
          filenames

    Version 2.2
        - Updated a few more potential security issues
        - Optimized the code a bit.
        - Expanded the doc for adding new mime/image types.

        Thanks to faithful ALA reader Justin Greer for
        lots of good tips and solid code contribution!

	INSTRUCTIONS
	1. Modify the $folder setting in the configuration section below.
	2. Add image types if needed (most users can ignore that part).
	3. Upload this file (rotate.php) to your webserver.  I recommend
	   uploading it to the same folder as your images.
	4. Link to the file as you would any normal image file, like this:

			[IMG]http://example.com/rotate.php[/IMG]

	5. You can also specify the image to display like this:

			[IMG]http://example.com/rotate.php?img=gorilla.jpg[/IMG]

		This would specify that an image named "gorilla.jpg" located
		in the image-rotation folder should be displayed.

	That's it, you're done.

*/

/* ------------------------- CONFIGURATION -----------------------

	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 = '.';

/*

	Most users can safely ignore this part.  If you're a programmer,
	keep reading, if not, you're done.  Go get some coffee.

    If you'd like to enable additional image types other than
	gif, jpg, and png, add a duplicate line to the section below
	for the new image type.

	Add the new file-type, single-quoted, inside brackets.

	Add the mime-type to be sent to the browser, also single-quoted,
	after the equal sign.

	For example:

	PDF Files:

		$extList['pdf'] = 'application/pdf';

    CSS Files:

        $extList['css'] = 'text/css';

    You can even serve up random HTML files:

	    $extList['html'] = 'text/html';
	    $extList['htm'] = 'text/html';

    Just be sure your mime-type definition is correct!

*/

    $extList = array();
	$extList['gif'] = 'image/gif';
	$extList['jpg'] = 'image/jpeg';
	$extList['jpeg'] = 'image/jpeg';
	$extList['png'] = 'image/png';

// You don't need to edit anything after this point.

// --------------------- END CONFIGURATION -----------------------

$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);
	}
}

?>

under "Configuration" area you change the $folder="." to the actual folder path of the images, (example "images/random/" then on the page you want the images to display you paste this;









not too difficult ot time consuming in my opinion!


----------



## ashras99

namenotfound said:


> This is what I use on *my* personal website.
> If your host supports PHP then you can use this code :up:
> 
> 
> 
> PHP:
> 
> 
> <?php
> $rotate[] = "[URL=LOCATION_URL][IMG]IMAGE_URL[/IMG][/URL]";
> $rotate[] = "[URL=LOCATION_URL][IMG]IMAGE_URL[/IMG][/URL]";
> $rotate[] = "[URL=LOCATION_URL][IMG]IMAGE_URL[/IMG][/URL]";
> $rotate[] = "[URL=LOCATION_URL][IMG]IMAGE_URL[/IMG][/URL]";
> $number = rand(0, sizeof($rotate) - 1);
> 
> echo $rotate[$number];
> ?>


I tried this but image is not coming...



Code:


http://cgarena.com/testslide.php

And hope blue outline not comes if the image is linked.


----------



## ashras99

Sequal7 said:


> Well.....the troubles with both of those scripts is they are difficult to update.
> 
> Random image from the link I supplied will scan the entire folder for images, and randomly place them on the page in the area you put the include. Therfore to add or remove images, you simply add or delete images in the folder, and the script stays the same. There is no need after initially placing it on your server to change the code page.
> 
> This is by far a superior application to either the java, or the very basic php example you posted here in use on your site. The file size isn't big at all, in fact its only 4k, and comments arent a bad thing either. Very good php designers will always comment individual functions or database connections so they can quickly access errors or changes.
> Comments enable you to multiuse of the scripts at any time and remember what exactly you have called or created.
> 
> What is so difficulyta bout their explination too?
> You copy and paste this code and save it as random.php;
> 
> 
> PHP:
> 
> 
> <?php
> 
> /*
> 
> AUTOMATIC IMAGE ROTATOR
> Version 2.2 - December 4, 2003
> Copyright (c) 2002-2003 Dan P. Benjamin, Automatic, Ltd.
> All Rights Reserved.
> 
> http://www.hiveware.com/imagerotator.php
> 
> http://www.automaticlabs.com/
> 
> DISCLAIMER
> Automatic, Ltd. makes no representations or warranties about
> the suitability of the software, either express or
> implied, including but not limited to the implied
> warranties of merchantability, fitness for a particular
> purpose, or non-infringement. Dan P. Benjamin and Automatic, Ltd.
> shall not be liable for any damages suffered by licensee
> as a result of using, modifying or distributing this
> software or its derivatives.
> 
> ABOUT
> This PHP script will randomly select an image file from a
> folder of images on your webserver.  You can then link to it
> as you would any standard image file and you'll see a random
> image each time you reload.
> 
> When you want to add or remove images from the rotation-pool,
> just add or remove them from the image rotation folder.
> 
> VERSION CHANGES
> Version 1.0
> - Release version
> 
> Version 1.5
> - Tweaked a few boring bugs
> 
> Version 2.0
> - Complete rewrite from the ground-up
> - Made it clearer where to make modifications
> - Made it easier to specify/change the rotation-folder
> - Made it easier to specify/change supported image types
> - Wrote better instructions and info (you're them reading now)
> - Significant speed improvements
> - More error checking
> - Cleaner code (albeit more PHP-specific)
> - Better/faster random number generation and file-type parsing
> - Added a feature where the image to display can be specified
> - Added a cool feature where, if an error occurs (such as no
> images being found in the specified folder) *and* you're
> lucky enough to have the GD libraries compiled into PHP on
> your webserver, we generate a replacement "error image" on
> the fly.
> 
> Version 2.1
> - Updated a potential security flaw when value-matching
> filenames
> 
> Version 2.2
> - Updated a few more potential security issues
> - Optimized the code a bit.
> - Expanded the doc for adding new mime/image types.
> 
> Thanks to faithful ALA reader Justin Greer for
> lots of good tips and solid code contribution!
> 
> INSTRUCTIONS
> 1. Modify the $folder setting in the configuration section below.
> 2. Add image types if needed (most users can ignore that part).
> 3. Upload this file (rotate.php) to your webserver.  I recommend
> uploading it to the same folder as your images.
> 4. Link to the file as you would any normal image file, like this:
> 
> [IMG]http://example.com/rotate.php[/IMG]
> 
> 5. You can also specify the image to display like this:
> 
> [IMG]http://example.com/rotate.php?img=gorilla.jpg[/IMG]
> 
> This would specify that an image named "gorilla.jpg" located
> in the image-rotation folder should be displayed.
> 
> That's it, you're done.
> 
> */
> 
> /* ------------------------- CONFIGURATION -----------------------
> 
> 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 = '.';
> 
> /*
> 
> Most users can safely ignore this part.  If you're a programmer,
> keep reading, if not, you're done.  Go get some coffee.
> 
> If you'd like to enable additional image types other than
> gif, jpg, and png, add a duplicate line to the section below
> for the new image type.
> 
> Add the new file-type, single-quoted, inside brackets.
> 
> Add the mime-type to be sent to the browser, also single-quoted,
> after the equal sign.
> 
> For example:
> 
> PDF Files:
> 
> $extList['pdf'] = 'application/pdf';
> 
> CSS Files:
> 
> $extList['css'] = 'text/css';
> 
> You can even serve up random HTML files:
> 
> $extList['html'] = 'text/html';
> $extList['htm'] = 'text/html';
> 
> Just be sure your mime-type definition is correct!
> 
> */
> 
> $extList = array();
> $extList['gif'] = 'image/gif';
> $extList['jpg'] = 'image/jpeg';
> $extList['jpeg'] = 'image/jpeg';
> $extList['png'] = 'image/png';
> 
> // You don't need to edit anything after this point.
> 
> // --------------------- END CONFIGURATION -----------------------
> 
> $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);
> }
> }
> 
> ?>
> 
> under "Configuration" area you change the $folder="." to the actual folder path of the images, (example "images/random/" then on the page you want the images to display you paste this;
> 
> 
> 
> 
> 
> 
> 
> 
> 
> not too difficult ot time consuming in my opinion!


The above script is good and also working fine but for this we have to first set the iframe on the page, secondly call the script on the Image load event. Dont you think this will little increase the time totally.


----------



## namenotfound

That tutorial is the exception. (it's pretty good)
There are many reasons I don't like alistapart.com

I'll give you an example:

I was looking thru a "tutorial" a couple of months ago that was supposed to show you how to do something in .htaccess

After a full page of babble, the guy links you to another page (written by someone completly different, mind you) with a tutorial for PHP

That's why I hate the site!

If I'm looking for a tutorial about .htaccess, don't bore me for an hour then link me to a page about PHP >_>

I'm mainly refering to this P.O.S. "tutorial" (I use quotes because I don't consider this grabage a real tutorial):
http://www.alistapart.com/articles/slashforward/


----------



## ashras99

But that's not the answer of my question  which script is the exception


----------



## Sequal7

Hello, I am not sure why you say you need an iframe?
It is not necessarry to call the script on imageload either, it acts just like an embedded image. What I mean is, the tag is exactly as if an image was placed onto the page. In this case however instead of the image your calling the script, which is rotate.php and a various image contained in the folder you set in that file will show each refresh.

Just place this anywhere on the page you want the image to show







(if the above code file named rotate.php is in the same folder as your home page, then make it









I have it on my newborn sons website I created, http://babyj.joycoweb.com/ the images are running off that script. It doesn't matter if its placed on an html or php page, the images will show.


----------

