Subscribe to Tutorial Feed

Flash and PHP Bible

The Flash and PHP Bible has been released! The book can be found on Amazon or wherever fine books are sold in your area.

The Flash and PHP Bible has a forum for quick support.

Scriptplayground » tutorials » php » Building a Smarter Random Image Loader

Building a Smarter Random Image Loader

How to build a smarter image loader that only shows an image once.

View an Example of this article before you get started.

If you are unfamiliar with the random image loading concept, I recommend you check out the original tutorial.

I will not be using that exact code in this tutorial, but it will help you better understand the process. The goal here is to develop a smarter script that will only display each image once. This concept could be used for an ad server, random user gallery or any number of things. To keep things simple the images will be in an array, but you could easily populate the list using a database call or two.

Now that you know what you'll be creating, let's get started.

Start by opening your favorite text editor, I use TextMate on the Mac. Create a new file, name it "smarter_image_loader.php" and save it. Once the file is created, add in the starting variables, which for this tutorial is the images to load.

<?php

// the images.. one per line, add a ',' to the end of each line
// excluding the last one
$images = array(
	'/images/1.jpg',
	'/images/2.jpg',
	'/images/3.jpg'
);

The $images variable holds the images to load, which could easily be changed to a more dynamic database call.

The next portion is a function, getRandomImage() which will handle the heavy lifting and return a new image src each time it's called.

function getRandomImage()
{
	global $images;
	
	$key = (mt_rand() % count($images));
	$file = $images[$key];
	
	unset($images[$key]);
	$images = array_values($images);

	return $file;
}

As you can see that function has a lot of tasks, viewing it in pieces will help you better understand it, so lets do that now.

The first line is creating a global reference to the $images variable which is needed to access the list of images to load.

The $key variable holds the array key which is generated using the length of the $images array and a random seed.

The $file variable contains the image path, determined based on the key that is picked.

The unset() function is used to remove the value within the array to ensure its not picked on a future call.

Once the array is cleared of the used value, the keys must be re-ordered so the other images can be properly chosen, which is accomplished using the array_values() function.

Then the last step is to return the image chosen which wraps up this function.

Now that the bulk of this process is completed, you may be wondering how to actually use this in your project. Simply make a call to the function and output within a set of <img> tags, such as:

print "<img src=\"". getRandomImage() . "\" />" . "<br />";

The last step is to test the code to ensure the array is being looped through properly and that no errors occur, which can be done so using code similar to the following.

$arr_len = count($images);
for($x=0; $x < $arr_len; $x++)
{
	print "<img src=\"". getRandomImage() . "\" />" . "<br />";
}

You now have a smarter random image loader, which can be used in a number of ways. Feel free to take this simple code and extend it using a database or multiple directories. The sky's the limit when it comes to programming, so have fun, keep learning and never stop exploring new ways to do things.

Here is the completed script for easy copy and pasting.

<?php

// the images.. one per line, add a ',' to the end of each line
// excluding the last one
$images = array(
	'/images/1.jpg',
	'/images/2.jpg',
	'/images/3.jpg'
);

function getRandomImage()
{
	global $images;
	
	$key = (mt_rand() % count($images));
	$file = $images[$key];
	
	unset($images[$key]);
	$images = array_values($images);

	return $file;
}

$arr_len = count($images);
for($x=0; $x < $arr_len; $x++)
{
	print "<img src=\"". getRandomImage() . "\" />" . "<br />";
}

?>

Follow Scriptplayground on Twitter (@scriptplay)

Comments: Building a Smarter Random Image Loader

 Hermie  Thu Mar 12, 2009 8:43 am  
Hé Matt,

Would love to see a preview of this. I'm not sure what this is....
 Karl  Tue Apr 14, 2009 6:43 pm  
Hi,
Just wondering if you have a working example of this script i could check out?
Cheers
 mkeefe  Tue Apr 14, 2009 9:40 pm  
@Karl - Sure thing, here you go:

http://v2.scriptplayground.com/article_files/Building-a-Smarter-Random-Image-Loader/
Add a comment
The ability to add new comments has been disabled in this archived version.

Loading
Main | Tutorials | Articles