PHP random image rotation script for your website

Placed in: 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 for a lightweight demo page.

Rotating Image

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:

images/header/rotate.php
images/header/abstract.jpg
images/header/bird.jpg
images/header/butterfly.jpg
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:

Download Source

View 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!

Technorati!

StumbleUpon!

Newsvine!

Furl!

Ma.gnolia!

Comments

Ricardo - Give some color

2008-01-21 18:34:03

Hey Marco.
Nice stuff here

very useful.
One question, can I change BG color or something like that?

Marco - Thanks

2008-01-21 19:04:20

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,,,

lock - Link

2008-01-27 02:34:58

Hi,

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

Regards

Marco - Yes, it's possible

2008-01-27 09:46:47

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.

lock - Link for different images

2008-01-27 21:06:30

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

Marco - Not possible (yet)

2008-01-27 21:56:47

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,

Karen - MSIE / Firefox acting differen

2008-01-27 22:43:16

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)

Marco - Stupid IE

2008-01-28 10:00:39

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,

bogdanl - change background color

2008-02-02 21:28:56

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!

Marco - Only with CSS

2008-02-04 10:03:10

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.

DaniloH

2008-02-14 20:37:36

Niiiice!

Anonymous

2008-02-22 19:25:22

Lovely, just what I needed :woohoo:

:woohoo:

gugu - gugu

2008-02-24 16:27:29

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

Jeff - Thanks for this mate!

2008-03-30 05:12:38

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!

Neville - Problem

2008-04-03 17:10:15

chetan - php quesion

2008-04-10 12:20:54

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:

:cheer:

Steve - Link images

2008-04-25 01:41:03

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.

Hardley - Rotating different Websites

2008-05-07 08:33:26

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

satea

2008-05-23 03:43:05

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.

Milo - doesn't work in IE

2008-06-10 10:56:07

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

Bobby

2008-10-02 20:34:00

If you're using this script across an entire site, it may load one image and cache the rotate.php file without loading a new image for the rest of the pages.
In ie, you'll actually have to click the refresh button to display a new image. This is troublesome for those who intended to display a random image on each page of their site.
To fix this, you may want to add php header functions directly to the script to ensure that your rotate.php file doesn't get cached with a static image across an entire site.
I added the following to the top of the rotate.php code: header("Cache-Control: no-cache"

;
It might also help if Marco understood his own script.

Slant Media - Curious

2008-11-23 23:31:45

Would you have any idea how to get over the problem associated with loading this script into multiple image tables on a single page (i.e. we were hoping to be able to create multiple image rotations in various area of a single page) - We created multiple image folders, named the rotate script: rotate1.php, rotate2.php, etc) and we called that from within the folder of images where it resides...

The page seems to stop loading images after the first couple have loaded - or it works intermittent (at best) - Any ideas?

jesse hoff

2009-01-12 12:30:58

Couldn't get it to work in ie, wasn't sure where to put your code exactly. Not very familiar with php, could you spell it out for me where to put it exactly?

Thanks, Jesse

Randomness

2008-06-23 06:41:29

What do I need to change to make this work with two random images side by side, without both being the same image?

Niles - perfect

2008-09-12 03:55:21

this was exactly what i was looking for.
i didn't want to clutter up the rest of the code with a bunch of javascript and now i don't have to. thank you.

Preston - thank you!

2008-09-13 19:50:20

nice work. i spent an entire day trying to get a previous script to work in FireFox. cheers!

Panchus - how to?

2008-10-30 17:45:08

Hello, Im trying to use this script but I cant figure out how.

My site have a header I would like to rotate. www.eduteca.com.ar

is the header with the illustration.

Where in joomla code should I put the code????

Im not programmer, thats the prob...

thanks in advance.

Derek C - Joomla?

2008-11-12 00:23:38

I'm also trying to configure a PHP image rotator as a background image within a Joomla template's style sheet. It looks like it's not allowing the PHP script to run its course.

This is the style for the rotator in the Joomla template's CSS:

#logo {
background:url(../images/rotator/rotate.php);
background-repeat:no-repeat;
background-position:bottom right;
position:absolute;
top:210px; left:30px;
width:462px; height:80px;

}

The directory and dimensions are perfect. The template just isn't calling on the script for some reason.

Any ideas?

Degas - How to use this scrip in css

2008-11-02 22:56:51

Hi,

How can i call the php file from a css insead of html?

Thanks a lot

Thomas - Multiple Directories

2008-11-14 19:33:43

Hey great script!

quick question:

im trying to use this script to pull images from multiple folders. I could easily just make copies of the images in one directory labeled "random" but I would like to keep them in their seperate folders to make updating easier on the people uploading the images (who will not be me)

I dont know if this is even possible, but if it is please let me know, thanks!

Kyle	2009-05-30 21:56:05

If am looking for a similar function. I have many folders from different users and I would like to have a random script that would search all these folders to make life easier.

I would also like a recent photos script displaying newest added photos from those folders as well.

I appreciate any insight, thank you in advance.

rony	2008-11-27 16:30:57

hey it's a nice one thank u.

kilroy - How to make the script just scroll images top to b

2008-12-03 02:45:28

How can I make the script just scroll thru the images from top to bottom.. the random is nice.. but Id like it ordered

Mike	2008-12-10 05:24:55

I'm having an odd issue where the images are rotating on refresh, but not fully loading. When I switch tabs or windows in my browser, then come back, the image is fully loaded perfectly. I'm using .png images. The only one that loads perfectly is a single .jpg (however, my other jpgs have the same problem as the .pngs). Oh, I'm using Firefox, by the way.

It's important that I use .pngs as I need the images to have transparency.

Any ideas?? Thanks

GGroup

2008-12-26 18:36:54

Hey Mike,

I'm having the same incomplete image load with Firefox and IE. Any word on the fix to get the header to fully display each time?

Thanks!

Jamie - Full image load problem.

2009-07-01 11:18:28

Did anyone get the FF full image load to work?!

Adam - Question

2008-12-10 10:02:21

great work, but is it possible to rotate more than one image on the website, I've tried and can only get the same image multiple times?

Cal - It works, and then it doesnt?

2008-12-18 21:42:21

hey. please can someone help me. it seems to work, and then randomly not work. some pages will rotate images and then just not display anything on the next page. im using it to change quotes on my site. the quotes are obviously jpegs. check out www.ebtsa.co.za.

thanks please help.

THANKS

Cal	2008-12-18 21:53:58

okay dont worry i got it working!!!!!!! my bad ... i made a school boy error ...

thanks for the awesome script!

jesse hoff - I can't get it to work

2009-01-12 11:14:30

Hey everyone,

Need a little help here, I'm not sure what I'm doing wrong. I've inserted the php file into my image folder, it's on the server but I'm still not getting a random image to come up. There's definitely more images in that folder, not all the same size though. Using freehostia.com as a web host. Any help would be appreciated.

Thanks, Jesse

jessehoff.com

jesse hoff - Never mind

2009-01-12 11:17:55

I just got it to work, sorry about that

Jesse

krud - Image name

2009-02-04 06:15:32

Hi there.
Great script! I love it.
I have a site with several thousand images. Is it possible to display the name of the image below?
I've tried 'print $img;' and 'echo $img;' within the php script, to no avail.
Thanks.

James - Image Transitions

2009-02-27 21:09:10

I really appreciate this script it is exactly what I was looking for. I would however like to change the transition effect from a top to bottom swipe to a fade.

How might I modify this code to do that?

Thank for the help.

PeteFriday - Change on page load

2009-03-10 11:59:20

Hiya,

great script. I use it in a css file so my background image changes. But it only changes when the refresh button is used. I want the background image to change every time my website is visited. How can i do this?
I see a lot of questions not awnsered, i really hope someone can help!

Thanks!

Nockadile - n/a

2009-03-26 02:08:10

I love your site, demos & image rotator. You didn't by chance build a version that allows a link from each image did you? I could really use something like this.

Christian Haugen - Works perfectly in Firefox but not in IE

2009-03-29 08:07:22

Excellent script man! But somehow it doesn't work in IE, just shows a blank spot where the picture should be. Why does it work in Firefox and now in IE?

Check out my webpage http://www.175days.no to see for yourself

Vinicius

2009-03-29 19:50:48

Thanks!!!! :lol:

:lol:

Mozack - Load more that 1 image

2009-04-02 14:36:42

Hi man,

Thanks for this great script, just 1 question:

I have one wordpress blog and i want to put 1 diferent image after each comment, how can i do that? it shopuld load more that 1 diferent image in same time:

I changed my comments.php and after keep one

Eddy Matthews

2009-04-14 10:53:17

I'm using this script and it works perfectly, but I'd like to add a feature if someone can help please?

Is it possible to have the script display the filename that is being displayed, but WITHOUT the extension?

For example, if I had a directory that contained the following images:

filename1.jpg
filename2.gif
filename3.jpeg

Can I have it so the when the image is displayed, it has a text at the top that says "filename1", or "filename2", and then display the image below that?

php is totally new to me, so ANY help would be very welcome!

Regards
Eddy

l33tCodeChick - Multimedia Production Specialist

2009-05-03 11:12:34

I have been searching high and low for this, but there is one teeny bit of info missing:

In my html, how do I reference it so that I have rotating html pages? I am quite aware of the array used in the php file to reference the html page (I have some php experience) . . . but now how do I make it display!

For the image rotate you reference image tags < img src = " # " > in html on the html page. How do I reference so I have rotating html pages!

Ben Taylor - Thank dude!

2009-05-20 15:25:25

Hey man,

Just thought I'd let you know, worked a treat straight out of the box.. nice one man, very easy script to use.

Ben

Joel - thanks!

2009-06-01 17:47:18

Hey! Thanks for your code. It was simple and perfect, as the best things in life!

Hanneke

2009-06-04 14:54:50

i was just wondering what i have to add to the head-part of my html to get the css to switch? i can't seem to figure it out

Rob - IE Caching Fix to refresh images

2009-06-04 20:04:36

To fix the rotate.php caching problem in IE add the following line to the top of your script (under

Rob	2009-06-04 20:05:43

To fix the rotate.php caching problem in IE add the following line to the top of your script (under the first php line)

Code:

header("Cache-Control: no-cache, must-revalidate";

Unsubscribe from e-mail notifications.

< Prev		Next >

Subscribe

Marcofolio.net has 2095 addicts. Join them!

Custom Icon Design

Custom Icon Design

Custom Web Design

Custom Web Design

Search

Or try the sitemap

Main Menu

Follow Me

Friends of Marcofolio.net

2007 - 2009 Marcofolio.net

This (we)blog brings you information about (web)design, blogging tips, (programming) tutorials and much, much more. I can't describe Marcofolio.net in words: Just look around and be amazed. Many (new) visitors have a habit to stick around, just because of the variety of articles.

Have fun reading this blog and don't forget to subscribe to the feed to keep updated on the latest articles.