[RESOLVED] Shuffling Images

[rooskie54]

Hello all.

I'm not very php savvy, but for the most part I can look at things and figure out what they do. I'm trying to put together some code that puts images in random order, but it's not working the way I want it to. Right now I have the following:

<?php
$pics = array(
 "<img src=\"block1.jpg\">",
 "<img src=\"block2.jpg\">",
 "<img src=\"block3.jpg\">",
);

shuffle($pics);

foreach($pics as $pics) {
 echo $pics;
}
?>

This randomizes the order of the 3 images, but it puts them in a row. I want to have something that looks like this (probably in a table):
|image| |image| |image|
|image| |image| |image|
|image| |image| |image|
Where all of those images are randomly placed. (an example of this can be seen at www.phatfactory.net)

Any help or suggestions would be greatly appreciated!

[devinemke]

a simple example...

$pics = range(1,9);
shuffle($pics);
$chunks = array_chunk($pics, 3);

echo '<table border="1">';
foreach ($chunks as $value)
{
	echo '<tr>';
	foreach ($value as $sub_value)
	{
		echo '<td><img src="block' . $sub_value . '.jpg" alt="' . $sub_value  .'"></td>';
	}
	echo '</tr>';
}
echo '</table>';

[big_nerd]

rooksie54,

[edit: devinemike's method is better ]

There are many ways to do it. You can intialize a table with the columns that are equal size to the images, etc.

They use css on phatfactory.net (if you view the source you can get the css file).

THey use:

.random_box {
	float: left;
	margin: 0;
	width: 140px;
	height: 140px;
	overflow: hidden;
}
.random_box img {
	border: 0;
}

Which in short is basically just a small layer. They implement them in span tags, with the class "random_box";

If you copy their method, you would use something like:

<style type="text/css">
<!--
.random_box {
	float: left;
	margin: 0;
	width: 140px;
	height: 140px;
	overflow: hidden;
	background-color: #000000; 
}
.random_box img {
	border: 0;
}

-->
</style>
<?php 

$pics = array( 
"block1.jpg",
"block2.jpg",
"block3.jpg",
"block4.jpg",
"NULL",
"NULL",
); 

shuffle($pics); 

foreach($pics as $pics) { 
	if ($pics != "NULL") {
		echo "<span class=\"random_box\"><a href=\"#\"><img src=\"$pics\" border=\"0\"></a></span>; 
	} else { // This would be an empty box
		echo "<span class=\"random_box\">&nbsp;</span>";
	}
} 
?>

Of Course, thats based on a 140x140 image.

It may need some tweaking, but that's the general idea.

[rooskie54]

Thank you both of you! That does exactly what I need it to!

[bradgrafelman]

Don't forget to mark this thread resolved.