PHP/jQuery populate content of squares randomly

Question

Here is the scenario I am having problems with:

I have a Wordpress page with 25 squares(divs!) on the page.

I want to randomly populate the squares with: - either a thumbnail from a random post - or a background shade of red ( this shade of red may vary)

Constraints: - I have the PHP code to populate the squares with a random posts thumbnail. It works. I just need to randomize which squares fetch these thumbnails. - There are 25 squares. 20 of them will pull a thumbnail, and the other 5 will generate a background color shade of red.

How can I accomplish this using PHP/jQuery?

im thinking maybe i should have all the code in the square programmed in so certain squares fetch the content via hardcoding. Then use JS to randomize the order of these squares?

hmmm. but the squares which fetch the thumbnails contains PHP code so this is difficult to manage.

any ideas?

---

edit: here is some code:

the squares are just divs with IDs from 1 - 25:

<div class="square" id="1"> 

        </div>

and the PHP code to retrieve the thumbnail (which must appear inside a div to fetch thumbnail):

<?php 
            $args=array(
            'showposts' => 1,
            'orderby'=>rand,
            'posts_per_page' => 25,
           'category__in'=>4,3,5,8,6,7
           );
            query_posts($args);
            if (have_posts()) : while (have_posts()) : the_post(); ?>
            <?php $do_not_duplicate[] = $post->ID; ?>
          <div class="post" id="post-<?php the_ID();?>"> 

            <!-- thumbnail wrapper -->
            <div class="thumb main"> 

              <!-- 235150image-covers -->
              <?php $image = get_post_meta($post->ID, 'thumbnail', true); ?>
              <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img src="<?php echo $image; ?>" alt="" class=""/></a> 
              <!-- 235150image end --> 


            </div>
          </div>
          <?php endwhile; ?>
          <?php endif; ?>

the background color of red is straightforwards with CSS.

---

Thoughts?

what i need is similar to this really (http://stackoverflow.com/questions/1533910/randomize-a-sequence-of-div-elements-with-jquery)

i will check it out.

Answer 1

i think what you are looking for is

shuffle ( $array )

first populate the array 20 with thumbs, 5 with colors and then shuffle.

more here http://www.php.net/manual/en/function.shuffle.php

Answer 2

I answered my own question:

Found the answer here: http://stackoverflow.com/questions/1533910/randomize-a-sequence-of-div-elements-with-jquery