Integrating jSquares and Jquery with Wordpress loop
<p>I am trying to integrate jSquares with wordpress and I am having a couple of issues. I am a beginner developer - but would love to solve this problem so that anyone can use jSquares with Wordpress. jSquares info can be found here: boedesign.com/blog/2009/10/22/jsquares-for-jquery/</p>

<p>This is my code so far:</p>

<pre><code>    &lt;div id="js-container"&gt;

&lt;?                      $boxes = array(
// sizes are styled through css and top, left css attributes are hard-coded on the div
                array('size' =&gt; 3, 'top' =&gt; 0, 'left' =&gt; 0),
                    array('size' =&gt; 2, 'top' =&gt; 0,'left' =&gt; 224),
                    array('size' =&gt; 2, 'top' =&gt; 78, 'left' =&gt; 224),
                    array('size' =&gt; 3, 'top' =&gt; 0, 'left' =&gt; 336),
                    array('size' =&gt; 2, 'top' =&gt; 0, 'left' =&gt; 560),
                    array('size' =&gt; 2, 'top' =&gt; 78, 'left' =&gt; 560),
                    array('size' =&gt; 2, 'top' =&gt; 156, 'left' =&gt; 0),
                    array('size' =&gt; 3, 'top' =&gt; 156, 'left' =&gt; 112),
                    array('size' =&gt; 2, 'top' =&gt; 156, 'left' =&gt; 336),
                    array('size' =&gt; 1, 'top' =&gt; 156, 'left' =&gt; 448),
                    array('size' =&gt; 1, 'top' =&gt; 195, 'left' =&gt; 448),
                    array('size' =&gt; 2, 'top' =&gt; 156, 'left' =&gt; 504),
                    array('size' =&gt; 1, 'top' =&gt; 156, 'left' =&gt; 616),
                    array('size' =&gt; 1, 'top' =&gt; 234, 'left' =&gt; 56),
                    array('size' =&gt; 1, 'top' =&gt; 234, 'left' =&gt; 336)); ?&gt;

            &lt;?php 
            query_posts(array(
                'showposts' =&gt; 15, 
                'post_type' =&gt; 'page', 
                'posts_per_page=15', 
                'orderby' =&gt; 'rand', 
                'post__not_in' =&gt; array(33,145,31,148,109,111,113,29,209)));


            if (have_posts()) : while (have_posts()) : the_post(); 
            foreach ($boxes as $box); ?&gt;    

    &lt;div class="js-image size-&lt;?= $box['size']; ?&gt;" style="top:&lt;?= $box['top']; ?&gt;px;left:&lt;?= $box['left']; ?&gt;px;"&gt;     
        &lt;a href="&lt;?php the_permalink(); ?&gt; "&gt;&lt;img class="js-small-image" src="&lt;? $image = wp_get_attachment_image_src ( get_post_thumbnail_id ( $post_id ), 'single-post-thumbnail' ); echo $image[0]; ?&gt;"/&gt;&lt;/a&gt;
        &lt;div class="js-small-caption"&gt;
            &lt;span&gt;&lt;?php the_title(); ?&gt;&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="js-overlay-caption-content"&gt;
            &lt;h4&gt;&lt;?php the_title(); ?&gt;&lt;/h4&gt;
            &lt;p&gt;
        &lt;a href="&lt;?php the_permalink(); ?&gt;"&gt;Read&lt;/a&gt;
            &lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;


        &lt;?php endwhile; endif; ?&gt;
</code></pre>

<p>
But the foreach ($boxes as $box) is only reflecting the last array for $boxes instead of one of each. I hope this makes sense. Any suggestions would be greatly appreciated!!</p>

<p>Thanks for the advice! Here's where I am: </p>

<pre><code>     &lt;?php $query = new WP_Query(
             array('showposts' =&gt; 15, 
             'post_type' =&gt; 'page', 
             'posts_per_page=15', 
             'orderby' =&gt; 'rand', 
             'post__not_in' =&gt; array(33,145,31,148,109,111,113,29,209))); 
      foreach($query-&gt;$boxes as $box ); 
      while ($query-&gt;have_posts()) : $query-&gt;the_post() ; ?&gt;
</code></pre>

<p>I appreciate your help. I am trying to teach a lot of this to myself and post it for everyone else to use. I am still getting stuck - Invalid argument supplied for foreach() </p>
