Need to rotate some images on a page? Want to call a script from your CSS to randomly rotate background images? This sucker can do it all … as long as you’re running PHP, anyway. This script will load an image at random from a certain directory (all images from the same directory as the script is located) each time the page is loaded/refreshed.
rotator script (will open in new window)
Wanna know? Here we go:
- Click on the link above. This will open the script as a text file in a new window.
- Copy and paste the script in your favorite HTML or text editor, and save as rotator.php
- Place the rotator.php file in the same directory as the images you want to rotate … ONLY THOSE IMAGES you want to rotate can be in the directory. Keep in mind the script will use any image it finds in its directory.
- make a call to the file just as you would any other image:
- On-page images: <img src="https://www.yoursiteurl.com/images/rotate.php" alt="" />
- CSS background: background:url(https://www.yoursiteurl.com/images/rotate.php) no-repeat bottom center; (or whatever positioning styles you need)
- Follow any other instructions that may be in the comments of the script, and you should be good to go.
It’s really pretty simple to use. You can even have this script in multiple directories with images used for various elements, and have tons of things rotating on your page(s) … though that may not be advisable for usability reasons – try to keep it simple.
Source: Automatic Labs
Kudos: Dan Benjamin
Also featured on: A List Apart
Is there a way to resize the image to never be wider then a certain amount of pixels? My source images are all different sizes and I want to keep them in a contained box. Thanks.
Hi there,
When I load my site it starts with a random image (I’ve uploaded 6 to the directory).
However, when surfing the site it fails to change – I was hoping it would load a random image for each page in my site a users married him.
Help!
Chris
sure thing, chris. a couple of things to make sure of …
1) rotator.php is in the folder with your photos
2) use rotator.php just as you would for any other image call (whether inline image call or CSS background image, etc)
that’s really all you have to do. now, since it is random, it may very well show the same image multiple times in a row.
if you need more help, let me know and we’ll take a look at your code.
thanks.
Very good script! thanks 🙂
I have a question:
How to add “speed time” together with page reload for image rotation?
Like a slideshow I’d like the images to be realoaded every “x” seconds.
Is there a way for it?
@Chris – good question, chris, but this rotator is based on page refresh … not auto “scrolling”
2 – if you’re using the on-page image call, you could add width and height controls so that you would have something like:
then create a class in your stylesheet: .rotatingimages {width:250px; height:100px;}
how to do it ?