How can I prevent randomly positioned images from overlapping?

[J6891]

Hi there,

 

I am new to the forum and *extremely* new to PHP, so this is my first post!

 

I am currently working through the following tutorial : http://tutorialzine.com/2009/11/hovering-gallery-css3-jquery which uses CSS3 and jQuery, but it also uses PHP.

 

The PHP is used to look in a directory and pull out the images and place them randomly on the page. The problem with this is that the drag and drop facility this tutorial uses does not work in IE9 or on the iPad and so I'm looking to simply generate the images without the drag and drop. To do this I need to stop images from overlapping - or at least stop them from overlapping too much - they can overlap by 15px or so.

 

Please can anyone point me in the right direction of how I can achieve this? Thank you in advance! 

 

Here is the PHP code used in the tutorial:

 

/* Configuration Start */
$thumb_directory = 'img/thumbs';
$orig_directory = 'img/original';
$stage_width=600;
$stage_height=400;
/* Configuration end */

$allowed_types=array('jpg','jpeg','gif','png');
$file_parts=array();
$ext='';
$title='';
$i=0;

/* Opening the thumbnail directory and looping through all the thumbs: */
$dir_handle = @opendir($thumb_directory) or die("There is an error with your image directory!");
$i=1;

while ($file = readdir($dir_handle))
{
/* Skipping the system files: */
if($file=='.' || $file == '..') continue;

$file_parts = explode('.',$file);
$ext = strtolower(array_pop($file_parts));

/* Using the file name (withouth the extension) as a image title: */
$title = implode('.',$file_parts);
$title = htmlspecialchars($title);

/* If the file extension is allowed: */
if(in_array($ext,$allowed_types))
{
	/* Generating random values for the position and rotation: */
	$left=rand(0,$stage_width);
	$top=rand(0,400);
	$rot = rand(-40,40);

	if($top>$stage_height-130 && $left > $stage_width-230)
	{
		/* Prevent the images from hiding the drop box */
		$top-=120+130;
		$left-=230;
	}

	/* Outputting each image: */
	echo '
	<div id="pic-'.($i++).'" class="pic" style="top:'.$top.'px;left:'.$left.'px;background:url('.$thumb_directory.'/'.$file.') no-repeat 50% 50%; -moz-transform:rotate('.$rot.'deg); -webkit-transform:rotate('.$rot.'deg);">

	<a class="fancybox" rel="fncbx" href="'.$orig_directory.'/'.$file.'" target="_blank">'.$title.'</a>

	</div>';
}
}

/* Closing the directory */
closedir($dir_handle);