Loop Offset for tag based "Related Posts"

Question

As I'm using the jQuery Tool "Scrollable" for my Related Posts section (see example here), I was wondering how I can implement an offset so that in the first loop it'll show the first 4 posts, then the next 4 related posts etc. I'm thinking about creating 3 loops like that right now, displaying the latest 12 related posts overall.

My current setup looks like this: (updated!)

           <h2>Related Posts</h2>                       
            

<!-- "previous page" action -->
<a class="prev browse left"></a>

<!-- root element for scrollable -->
<div class="scrollable" id=chained>   
   
   <!-- root element for the items -->
   <div class="items">


                            <?php 
                            $backup = $post;
                            $tags = wp_get_post_tags($post->ID);
                            if ($tags) {
                                $tag_ids = array();
                                foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
                            
                                $args = array(
    'tag__in' => $tag_ids,
    'post__not_in' => array($post->ID),
    'posts_per_page'=> 12
);

                                $my_query = new WP_Query( $args );
if( $my_query->have_posts() ):
?>  


   
  
      <div>


 <?php
    while ( $my_query->have_posts() ) : $my_query->the_post();

        the_title();

        // if this is not the last post
        // and remainder of current post plus one then divided by four is zero
        // close the container and open a new one
        if( $my_query->current_post != ( $my_query->post_count - 1 ) && ( ( $my_query->current_post + 1 ) % 4 ) == 0 ):
            ?>
            </div>

<div>
  <?php
        endif; 

 endwhile;
    ?>

            </div>



</div></div>

<!-- "next page" action -->
<a class="next browse right"></a>


<br clear="all" />

However, I just don't know how to implement it into the existing code. Not sure if that's even possible or if I first have to use a different way to create my loop to make it work?

Thanks a lot in advance! :)

EDIT: Last updated on October 16th. I still haven't figured this out, please help!

Answer 1

doing 3 separate queries is unnecessary and inefficient, do one query for all 12 posts and output your container markup every fourth post.

$args = array(
    'tag__in' => $tag_ids,
    'post__not_in' => array($post->ID),
    'posts_per_page'=> 12
);
$my_query = new WP_Query( $args );
if( $my_query->have_posts() ):
?>  
    <div class="container">
    <?php
    while ( $my_query->have_posts() ) : $my_query->the_post();

        the_title();

        // if this is not the last post
        // and remainder of current post plus one then divided by four is zero
        // close the container and open a new one
        if( $my_query->current_post != ( $my_query->post_count - 1 ) && ( ( $my_query->current_post + 1 ) % 4 ) == 0 ):
            ?>
            </div>
            <div class="container">
            <?php
        endif;

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