How to create an identical second loop for attachments?

Question

I have one loop for big images, and I need the same loop with small images (thumbnails). This is where I am stuck.

Use case: I am trying to implement the elastic image slideshow jQuery plugin with WordPress following this tutorial.

So far I was able to get the large images but I can't figure how to manage the thumbnail navigation.

Here is the code that I used so far. Actually I don't know how to manage two thumbnail using same query one for main image and one for navigation image.

<div id="ei-slider" class="ei-slider">
    <ul class="ei-slider-large">
       <?php
    query_posts(array('category_name' => 'featured', 'posts_per_page' => 3));
    if(have_posts()) :
        while(have_posts()) : the_post();
    ?>
     <li>
        <?php the_post_thumbnail(); ?>
        <div class="ei-title"><h2> <?php the_title_attribute(); ?> </h2><h3><?php the_excerpt(); ?></h3></div>
      </li>
      <?php
        endwhile;
    endif;
    wp_reset_query();
    ?>
    </ul>
    <ul class="ei-slider-thumbs">
    <?php 
    // I need the thumbnails here.
    ?>
        <li class="ei-slider-element">Current</li>
        <li>
            <a href="#">Slide 1</a>
            <img src="images/thumbs/1.jpg" alt="thumb01" />
        </li>
        <li> <a href="#">Slide 2</a>
            <img src="images/thumbs/2.jpg" alt="thumb02" /></li>
    </ul>
</div>

May be I am looking for something like this? This theme implemented the slider with WordPress.

Answer 1

You don’t need a second loop. Just save all the data you need later during the first loop.

Sample code, not tested, just a hint:

<ul class="ei-slider-large">
<?php
// Here we store the data.
$second_loop = array();

// Main loop
$main_query = new WP_Query(
    array(
       'category_name'  => 'featured', 
       'posts_per_page' => 3
    )
);
if( $main_query->have_posts() ):
    while( $main_query->have_posts() ): 
        $main_query->the_post();
?>
 <li>
    <?php the_post_thumbnail(); ?>
    <div class="ei-title">
      <h2><?php the_title_attribute(); ?></h2>
      <h3><?php the_excerpt(); ?></h3></div>
  </li>
  <?php
    // collect data, adjust the image size!
    $second_loop[ $post->ID] = get_the_post_thumbnail( $post->ID, 'preview-size' );

    endwhile;
endif;
wp_reset_query();
?>
</ul>

In your second loop you don’t need another query. Just use the array $second_loop.

<ul class="ei-slider-thumbs">
<?php 
foreach ( $second_loop as $post_id => $thumbnail )
{
?>
    <li class="ei-slider-element">Current</li>
    <li>
        <a href="#">Slide 1</a>
        <?php echo $thumbnail; ?>
    </li>
<?php
}
?>
</ul>

Alternatively you could save the thumbnail URL as an attribute data-thumb in the li of the first list and create the second list in JavaScript.

Also read When should you use WP_Query vs query_posts() vs get_posts()?. query_posts() has often some strange side effects.

Answer 2

@toscho's answer will work great and he's totally right about query_posts(), etc. (I'm a big fan of WP_Query and the pre_get_posts filter), but there is a WordPress function designed for exactly what you're asking: rewind_posts().

It takes no args and you just call it after your first loop and before your second. To get really abstract:

<?php
while( have_posts() ) : the_post;

    // print out big images

endwhile;

rewind_posts();

while( have_posts() ) : the_post;

    // print out small images

endwhile;
?>