Home
PHP Random Image Rotation

Want some randomness on your website? Try out this PHP image rotator. This script will display a random image every time the user re-loads the page or starts navigating. A very nice effect that can help you make your website a little bit more interactive.

PHP Random Image Rotation

This script can be perfectly used for a banner of header on your website. You can also use this in your signature or avatar on a forum. Additionally, you can rotate HTML and CSS files. Just make sure this script is placed on a PHP server, otherwise it will not work.

Demo

Simply refresh the current page and see the image below changing each time. The image is chosen randomly. You can also visit the demo page Demo for a lightweight demo page.

Installing on your site

To install the script, simply download it and place it in any folder of your server. In the default configuration, all images from the folder where the script is located are used.

Example:

  1. images/header/rotate.php
  2. images/header/abstract.jpg
  3. images/header/bird.jpg
  4. images/header/butterfly.jpg
  5. images/header/happy.jpg

Now direct the source to the PHP file and you're done.

<img src="images/header/rotate.php" alt="Header" width="400" height="100" />

That's it. Now any random image file located in the same directory as the script will be displayed.

Advanced configuration

  • $folder = '.';

Change this variable in the script to locate the directory where your images are placed. When the default is selected, the script wil randomly use any image file that is located in the same directory as the script.

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

In this variable you can set which image types are used. For example, remove all the default $extList values and add a $extList['css'] = 'text/css';. Now a random CSS file be selected. This way, you can play a little bit with your websites CSS, making it fun for the visitor every time he reloads the page. You can actually random any file you want.

Attached files:

SourceDownload Source

DemoView Demo

Enjoy and good luck using this script. Where are you going to use it for?



Tags:  php webdesign image rotate script

Interested in this topic? You might enjoy another article I've written called

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to:
Reddit!Del.icio.us!Facebook!Technorati!StumbleUpon!Newsvine!Furl!Ma.gnolia!
Comments
Add NewSearchRSS
Ricardo - Give some color   | 82.154.201.xxx | 2008-01-21 18:34:03
Gravatar image Hey Marco.
Nice stuff here ;) very useful.
One question, can I change BG color or something like that?
Reply | Quote
1 0
Marco - Thanks   | 62.194.187.xxx | 2008-01-21 19:04:20
Gravatar image Hey Ricardo,

Thanks, hope you like everything.

What do you mean with changing the background color?

With this script you could rotate the CSS file or the image file for the background, if that's what you mean.

Greetings,,,
Reply | Quote
2 0
lock - Link   | 79.64.59.xxx | 2008-01-27 02:34:58
Gravatar image Hi,

Excellent stuff. Just wondering if it's possible to turn the image to a link, make it clickable etc?

Regards
Reply | Quote
1 0
Marco - Yes, it's possible   | 62.194.187.xxx | 2008-01-27 09:46:47
Gravatar image Hello lock,

Of course it's possible to turn the image into a link. Just use the following:
<_a href="http://www.LINK.com"><_img src="rotate.php" border="0" />
(Remove the underscores "_" )
That should work!

Don't forget the "title" and "alt" attributes if you want to make it W3C valid.
Reply | Quote
1 0
lock - Link for different images   | 79.64.36.xxx | 2008-01-27 21:06:30
Gravatar image Hello Marco,

Thanks for the reply. Im just wondering if I could specify a different link for each image? For example, there are 5 images in the folder and I want different link for each one when they show up. Hope that makes sense.

Also, how do I implement the title and alt attributes within the code?

Regards
Reply | Quote
1 0
Marco - Not possible (yet)   | 62.194.187.xxx | 2008-01-27 21:56:47
Gravatar image Hello Lock,

Great question. This functionality isn't provided with the script, but when I have time I'll maybe create one that'll suit your needs.

Additionally, as you read the documentation, you could also rotate HTML files (IFRAME). If you have the image and link located in the HTML placed correct, it should be able to work.

ALT and TITLE:




Greetings,
Reply | Quote
2 0
Karen - MSIE / Firefox acting differen   | 99.251.4.xxx | 2008-01-27 22:43:16
Gravatar image Hi Marco,

I know very little about php, but am trying to make random images work on a site for a friend.

I've inserted rotate.php on every html page of the site at http://www.bodydesign.ca/draft.html When I visit it with MSIE and Firefox, and click on the links in the expanding menu, every page has a random image displayed in Firefox, but MSIE repeats the same image regardless of what link you choose. The picture only changes when you refresh the page.

Any suggestions how to get the site to have random headers throughout every page, in both browsers? Thanks in advance for any help.

Karen :o)
Reply | Quote
2 0
Marco - Stupid IE   | 62.194.187.xxx | 2008-01-28 10:00:39
Gravatar image Hello Karen,

Pretty strange, but you're right. I really don't know how this comes, since I tested it before with IE and it worked.

I'm guessing it has something to so with your "mapping" over the logo or the pagenavigation.

The script itself works perfect in IE:
http://www.bodydesign.ca/banners/rotate.php

Hope you can make this work!

Greetings,
Reply | Quote
1 0
bogdanl - change background color   | 77.81.1.xxx | 2008-02-02 21:28:56
Gravatar image Hi!

First of all this is a very nice script. I just want to change the color of the background in white or black depending on the image that is loaded. So i have two images: one with white background and one with black background. When the image with white background color has loaded i want the background of the page to be white too...same with the image with black background color.
It's possible?
Thank you!
Reply | Quote
2 0
Marco - Only with CSS   | 62.194.187.xxx | 2008-02-04 10:03:10
Gravatar image The only way to do this, is by rotating the CSS file.

In the "white.css" you have the template with the white background and the white image.

In de "black.css" you have the template with the black background and the black image.

Now use rotate.php to rotate between "white.css" and "black.css".

Good luck.
Reply | Quote
2 0
DaniloH   | 201.12.60.xxx | 2008-02-14 20:37:36
Gravatar image Niiiice! ;)
Reply | Quote
2 0
Anonymous   | 86.29.28.xxx | 2008-02-22 19:25:22
Gravatar image Lovely, just what I needed :woohoo:
Reply | Quote
2 0
gugu - gugu   | 196.207.32.xxx | 2008-02-24 16:27:29
Gravatar image Hi
i need to lear a simple hpp image rotate script that wil run on second basis , i wan to display ads at 10 seconds intervals
i've worked WITH $SECOND thing to display a different image at different $sec variables but images jus don pop up without refreshing refreshing the page
please assist
Reply | Quote
0 0
Jeff - Thanks for this mate!   | 125.238.169.xxx | 2008-03-30 05:12:38
Gravatar image Thanks for this mate! I added your rotate.php code (renamed to header_logo.php) and then I used this .htaccess code to change it into a .png extension:
RewriteEngine On
RewriteRule ^.*$ header_logo.php

Works like a charm. Previous code I used gave garbled text when I 'view image' with firefox. This does not produce this error. Thanks!
Reply | Quote
0 0
Neville - Problem   | 198.54.202.xxx | 2008-04-03 17:10:15
Gravatar image :woohoo:
Great script you got, but i'm having trouble implementing it.
look at http://www.czuobjects.com/idgirl/index.php and you will see the results i get.
please help.
Reply | Quote
0 2
chetan - php quesion   | 121.247.73.xxx | 2008-04-10 12:20:54
Gravatar image hi, i am new with php.
I am get success that upload image and store image with full size as well as thumbnail with different folders. And i can also save the path in the database in which image is save. I have problem that i can show that image sequentially in the webpages by using that db path or directly from that folder. I will try lots of thing but i can't see any solution. So please help me to solve that problem. Or any script is their to solve that problem
thank you:cheer:
Reply | Quote
0 0
Steve - Link images   | 99.234.208.xxx | 2008-04-25 01:41:03
Gravatar image I read what you said about making an HTML page to make images linkable but it still doesn't work for me. Can you PLEASE provide an example of an rotatable HTML file, preferably with an image inside linking to another page? I tried IFRAMES -- EVERYTHING! But it just won't for me. :(
Reply | Quote
0 0
Hardley - Rotating different Websites   | 196.27.103.xxx | 2008-05-07 08:33:26
Gravatar image may someone help with a script that i can use to rotate different website after an interval, say 10 sec or so.

kind regards

Hardley
Reply | Quote
0 0
satea   | 58.65.155.xxx | 2008-05-23 03:43:05
Gravatar image is it possible to configure the script so only get the images that end with "_s.jpg" from the given folder?

I have all of my images in the same folder, but thumbs end with _s.jpg and want to get randon from them, not all fo the images.
Reply | Quote
0 0
Milo - doesn't work in IE   | 78.156.67.xxx | 2008-06-10 10:56:07
Gravatar image Anyone know how to get this to work in Internet Explorer - the rotation of images only seems to work if you stay on the same page and actaully hit the refresh button...if you've got this script on everypage of your site and you want a random image selected each time you visit a page - works fine in Firefox, but in IE it seems to pick one image and then doesn't matter how many other pages you visit, it doesn't change the image unless you refresh the page by clicking the refresh button
Reply | Quote
0 0
Randomness   | 61.95.118.xxx | 2008-06-23 06:41:29
Gravatar image What do I need to change to make this work with two random images side by side, without both being the same image?
Reply | Quote
0 0
Read more...
Name:
Email:
  Gravatar enabled.
Website:
Title:
UBBCode:
[b] [i] [u] [url] [quote] [code] [img] 
 
 
:angry::0:confused::cheer:B):evil::silly::dry::lol::kiss::D:pinch:
:(:shock::X:side::):P:unsure::woohoo::huh::whistle:;):s
:!::?::idea::arrow:
 
Security Image
Please input the anti-spam code that you can read in the image.
Unsubscribe from e-mail notifications.
 
< Prev   Next >
[ Back ]
Subscribe
Navigation
Search
Search:
          
Sponsors
    



Web Templates
Blogrush