Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
    
At the bottom of the tutorial there's a section for the _initEvents method. Does your JavaScript include that section? (This is what handles the click event for the thumbnails) –  Jared Cobb Oct 6 '12 at 14:56
    
yes . i included the js from the tutorial . –  Sadi Mahmud Oct 6 '12 at 16:11
    
I might have misunderstood the initial problem. Are you having problems with the JavaScript / jQuery functionality? Or are you having problems rendering a second loop for the thumbnails? –  Jared Cobb Oct 6 '12 at 17:20
    
i am having problems rendering a second loop for the thumbnails . i included all the js and css from the tutorials and i was able to create the 1st loop for the large images but i can not figure out how to make the 2nd loop . you can see i used query post to call images for the 1st loop but when i use another loop using same query it does not work . –  Sadi Mahmud Oct 6 '12 at 17:29

2 Answers 2

up vote 0 down vote accepted

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.

share|improve this answer
    
tried out but no luck . no thumbnail image appear in 2nd loop . –  Sadi Mahmud Oct 6 '12 at 18:35
    
var_dump( $second_loop ); will tell you what is available. –  toscho Oct 6 '12 at 18:42
    
did i miss something in here? get_the_post_thumbnail( $post->ID, 'preview-size' ); because images are now showing in 2nd loop but they are extremely tiny . –  Sadi Mahmud Oct 6 '12 at 19:01
    
i am not good at php first of all but this is strange . when i used var_dump ($thumbnail); on the page in somewhere to see what is available and second loop started to show thumbnail! but in tiny size and when i remove var_dump ($thumbnail); it stopped showing thumbnails in second loop ! –  Sadi Mahmud Oct 6 '12 at 19:04

@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;
?>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.