Generating random images to the height of another div. PHP - php

Question

This code at the moment picks 6 random images from my images directory and places them in a sidebar for display. The problem is that I don't want the sidebar to display just 6 images, I want the sidebar to generate images to match the height of my main content div.
for($i = 0 ; $i < $imagesCount ; $i++) {
$randomIndex = array_rand($images);
$file_title = $randomImage = $images[$randomIndex];
unset($images[$randomIndex]);
?>
<a href="<?php echo $randomImage ?>"><img src="<?php echo $randomImage ?>"
width="100%" height="150%"; alt="" /> <br /><br /></a>
<?php
}
?>
Right now my idea was using jquery to find the height of the div and generating images until the value of the height is reached using something like this pseudo code:
for($i = 0 ; $i < $("#content").height(); ; $i++) {
random images stuff here;
}
The problem here (besides the fact that I am mixing JQuery and PHP which I would fix later) is that .height() is going to return me a value in pixels thus randomly generating 800-1200 random images. Does anyone have any ideas on how to approach this problem? Here is a link to the page so you can see what I mean if there is any confusion. Link

Answer 1

There's really a lot of ways you can approach this but...
Use php to create your dom elements like so and pass them off to jQuery as a variable:
<?php
$images = howeverYourGettingYourSixImages();
for($i=0; $i<count($images); $i++){
$image_array[]='<img class="images" src="'.$images[$i].'"/>';
}
echo('<script type="text/javascript">var images='.json_encode($image_array).'</script>');
?>
somewhere in your body declare your container
<div id="content"></div>
and before the body close execute the jQuery
<script type="text/javascript">
var container = jQuery('#content');
var container_height = container.height();
var image_height = container_height / images.length;
jQuery.each(images,function(k,v){
container.append(v);
});
jQuery(".images").height(image_height);;
</script>
and to ensure your content container has a height and that the elements stack add some css to your head
<style type="text/css">
#content{
height: 600px;
}
.images{
float:left;
clear:both;
}
</style>