Random Image Loader

Pipeline-Webdesign · Share | #1 (**permalink**) 02-26-2004, 09:04 AM

I have approxametly 10 images that I would like the browser to randomely pick from each time the page is loaded. Is there a simple script out there that would allow this to happen?

Michael

Cibok · #2 (**permalink**) 02-26-2004, 09:07 AM

I belive that you're looking for an image rotator..
hotscripts.com is full of them..

kwvarga · #3 (**permalink**) 02-26-2004, 09:49 AM

[code:1:613fe2053d]
<?php
$location = "http://www.mysite.com/images/";
$files = array("1", "2", "3", "4", "5", "6", "7", "8", "9", "10");
$file = array_rand($files, 1)[0];
$ending = ".jpg";

$img = $location . $file . $ending;
echo "<img src="" . $img . "">";
?>[/code:1:613fe2053d]

quick and easy

niceguyeddie · #4 (**permalink**) 02-26-2004, 09:55 AM

Quote:

Originally Posted by theSpear

[code:1:d7404d5b3c]
<?php
$location = "http://www.mysite.com/images/";
$files = array("1", "2", "3", "4", "5", "6", "7", "8", "9", "10");
$file = array_rand($files, 1)[0];
$ending = ".jpg";

$img = $location . $file . $ending;
echo "<img src="" . $img . "">";
?>[/code:1:d7404d5b3c]

Or as a function.

[code:1:d7404d5b3c]
<?php
function random_image()
{
$location = "http://www.mysite.com/images/";
$files = array("1", "2", "3", "4", "5", "6", "7", "8", "9", "10");
$file = array_rand($files, 1)[0];
$ending = ".jpg";

$img = $location . $file . $ending;
return $img;
}
?>
[/code:1:d7404d5b3c]

LazyJim · #5 (**permalink**) 02-26-2004, 11:31 AM

[code:1:b893dd3e4e]echo "<img src="" . $img . "">"; [/code:1:b893dd3e4e]
Why not change that to [code:1:b893dd3e4e]echo "<img src="$img">"; [/code:1:b893dd3e4e]
Or will that cause trouble?

kwvarga · #6 (**permalink**) 02-26-2004, 11:46 AM

it works... but tis not as easy to see errors.. just a programming habit of mine.. because I have to use it when i am doing arrays & stuff.. it keeps things clear..
this text is displayed... this text is a variable etc.

Pipeline-Webdesign · #7 (**permalink**) 02-26-2004, 11:46 AM

Quote:

Originally Posted by theSpear

[code:1:3c3e229642]
<?php
$location = "http://www.mysite.com/images/";
$files = array("1", "2", "3", "4", "5", "6", "7", "8", "9", "10");
$file = array_rand($files, 1)[0];
$ending = ".jpg";

$img = $location . $file . $ending;
echo "<img src="" . $img . "">";
?>[/code:1:3c3e229642]

quick and easy

would that code go at the top of my coding or where the image needs to be placed? ... and is any of this code need to be edited besides the location of my images?

kwvarga · #8 (**permalink**) 02-26-2004, 11:49 AM

that would go where it needs to be placed.. if you want more than 1 random image then you would use the function that niceguyeddie posted.. then just [code:1:7aa6573cbe]<?php echo "<img src="" . random_image() . "">"; ?>[/code:1:7aa6573cbe] where you would want the image.. the actual function code be anywhere inside <?php ?> tags at the end of the file.. wherever you want it..

LazyJim · #9 (**permalink**) 02-26-2004, 11:52 AM

anyway, if you wan't it to happen on the browser, as requested, then a JavaScript way...
Put this in you document first (in the <head> section idealy):
[code:1:7ddbe4fb49]
<script>
var url_before = "/images/image_";
var url_after = ".gif";
var min = 1;
var max = 10;
function printRndImg() {
document.write('<img src="' + url_before + ( min + Math.round(Math.random()*(max-min)) ) + url_after + '" boorder="0">')
}
</script>
[/code:1:7ddbe4fb49]
and set the variables up with you values, then put this anywhere you want an image:
[code:1:7ddbe4fb49]<script>printRndImg();</script>[/code:1:7ddbe4fb49]

Pipeline-Webdesign · #10 (**permalink**) 02-26-2004, 12:12 PM

Quote:

Originally Posted by LazyJim

anyway, if you wan't it to happen on the browser, as requested, then a JavaScript way...
Put this in you document first (in the <head> section idealy):
[code:1:d6195335d3]
<script>
var url_before = "/images/image_";
var url_after = ".gif";
var min = 1;
var max = 10;
function printRndImg() {
document.write('<img src="' + url_before + ( min + Math.round(Math.random()*(max-min)) ) + url_after + '" boorder="0">')
}
</script>
[/code:1:d6195335d3]
and set the variables up with you values, then put this anywhere you want an image:
[code:1:d6195335d3]<script>printRndImg();</script>[/code:1:d6195335d3]

i like this script alot better... much cleaner... but for some reason it's giving me a red X error... i've got my paths set right... any help?

Pipeline-Webdesign · #11 (**permalink**) 02-26-2004, 12:24 PM

nvm... i had my images named incorrectly... thanks everyone for you help!!

LazyJim · #12 (**permalink**) 02-26-2004, 12:48 PM

no probs

CrAg · #13 (**permalink**) 03-02-2004, 08:59 AM

Is there some kind of way to make the random images and links. I mean for example I have 5 banners and I want to link them to 5 different sites. Is it possible to do this?

Emancipator · #14 (**permalink**) 03-02-2004, 09:33 AM

Yes the code example I posted does exactly that. You can even set the alt tags.

Just include the file in your html page.

CrAg · #15 (**permalink**) 03-02-2004, 02:50 PM

Quote:

Originally Posted by LazyJim

anyway, if you wan't it to happen on the browser, as requested, then a JavaScript way...
Put this in you document first (in the <head> section idealy):
[code:1:4975e6cfc9]
<script>
var url_before = "/images/image_";
var url_after = ".gif";
var min = 1;
var max = 10;
function printRndImg() {
document.write('<img src="' + url_before + ( min + Math.round(Math.random()*(max-min)) ) + url_after + '" boorder="0">')
}
</script>
[/code:1:4975e6cfc9]
and set the variables up with you values, then put this anywhere you want an image:
[code:1:4975e6cfc9]<script>printRndImg();</script>[/code:1:4975e6cfc9]

OK!
I've got this script to work. How can I make that each picture has it's own link?

LazyJim · #16 (**permalink**) 03-03-2004, 12:30 PM

insert the <script>printRndImg();</script> into a link:

[code:1:048911ba22]<a href="somelink.html"><script>printRndImg();</script></a>[/code:1:048911ba22]

CrAg · #17 (**permalink**) 03-03-2004, 01:14 PM

Quote:

Originally Posted by LazyJim

insert the <script>printRndImg();</script> into a link:

[code:1:cc387717b2]<a href="somelink.html"><script>printRndImg();</script></a>[/code:1:cc387717b2]

Well, I know that. I do not need this. I need different link for different pictures. So each random picture will have it's own link.

LazyJim · #18 (**permalink**) 03-03-2004, 02:34 PM

oh right, so you never wanted a random image thingy at all (link to your post).

A banner rotation script, or in you case a random banner script, is a little different.

You should use PHP...

in your HTML (but the file needs a .php extension):
[code:1:51c6e88e8a]
<?php
$banner_min = 1;
$banner_max = 4;
$random_banner_number = rand($banner_min, $banner_max);
echo include("banner_$random_banner_number.php");
?>
[/code:1:51c6e88e8a]
and then create 4 files called "banner_X.php" where X is a number from 1 to 4. You can change those numbers to any number, but make sure you also change the $banner_min and $banner_max in the script above. These 4 files I said have a .php extension, but they only need HTML in them, (they can have PHP if you want), or even just text, they just need to be the code for the banner, for example:
[code:1:51c6e88e8a]<a href="link1.html" target="_blank"><img src="image_1.gif"></a>[/code:1:51c6e88e8a]

CrAg · #19 (**permalink**) 03-03-2004, 05:22 PM

Quote:

Originally Posted by LazyJim

oh right, so you never wanted a random image thingy at all (link to your post).

A banner rotation script, or in you case a random banner script, is a little different.

You should use PHP...

in your HTML (but the file needs a .php extension):
[code:1:05a94f25fc]
<?php
$banner_min = 1;
$banner_max = 4;
$random_banner_number = rand($banner_min, $banner_max);
echo include("banner_$random_banner_number.php");
?>
[/code:1:05a94f25fc]
and then create 4 files called "banner_X.php" where X is a number from 1 to 4. You can change those numbers to any number, but make sure you also change the $banner_min and $banner_max in the script above. These 4 files I said have a .php extension, but they only need HTML in them, (they can have PHP if you want), or even just text, they just need to be the code for the banner, for example:
[code:1:05a94f25fc]<a href="link1.html" target="_blank"><img src="image_1.gif"></a>[/code:1:05a94f25fc]

Well, at first I needed the Image Rotator. But then I also thought about banner rotator and thought I could do this with that script.

Ok. Let me try this script you just gave me. Next question, If I want to place this banner to some other page, how can I include them then? Like this:[code:1:05a94f25fc]<img src="page.php"></img>[/code:1:05a94f25fc]

LazyJim · #20 (**permalink**) 03-04-2004, 04:53 AM

well using the script i posted above, you need to repeat the <?php?> section anywhere a banner should be put, and make sure the path is correct.

I don't know why you keep wanting to do [code:1:5332601059]<img src="page.php"></img>[/code:1:5332601059] as that would not give you the <a href=""> </a> part!

If you want a more flexible solution with better code-reuse, then you can do this:

Step one, make a php script "printRndBannerNum.php" that holds the min & max values and acts random number function.
[code:1:5332601059]<?php
function printRndBannerNum() {
$banner_min = 1;
$banner_max = 4;
return rand($banner_min, $banner_max);
}
?>[/code:1:5332601059]
That is just so you have a central place to set the min and max numbers.

Then include it once per HTML page:
[code:1:5332601059]<?php include("printRndBannerNum.php"); ?>[/code:1:5332601059]

And call the function to get a random number and store it:
[code:1:5332601059]<?php $my_num = printRndBannerNum(); ?>[/code:1:5332601059]
which you can then use in one banner:
[code:1:5332601059]
<a href="link_<?php echo $my_num ?>.html" target="_blank"><img src="image_<?php echo $my_num ?>.gif"></a>
[/code:1:5332601059]

To put another banner in the page run this line again to change the number held in the variable:
[code:1:5332601059]<?php $my_num = printRndBannerNum(); ?>[/code:1:5332601059]