jQuery cycle thumbnails?

I use the jQuery cycle on the home page of http://getwellgabby.org/. You can inspect the elements to see what’s going on with CSS here.

For the PHP, I wrote a custom home page template as part of a child theme based on TwentyTen. There are two loops in the page: One that gets the static come page content, and another that pulls the latest blog post in “below the fold”.

<?php
    $page_id = 5; //Get the content for the "Home" page.
    $page_data = get_page( $page_id );
    $content = apply_filters('the_content', $page_data->post_content);
?>
<div id="post-<?php echo $page_id; ?>" <?php post_class('', $page_id); ?>>
<div class="entry-content">
<?php
    $arrImages =& get_children('order_by=menu_order&order=ASC&post_type=attachment&post_mime_type=image&post_parent=" . $page_id);
    if($arrImages): ?>
        <script type="text/javascript">
        jQuery(function(){
           jQuery("#slider').cycle({ fx: 'fade', speed: 3000 });
        });
        </script>
        <div id="slider-wrapper">
          <div id="slider">
              <!-- To add photos to this page, upload 385 x 265 px images in the WP media manager and attach them to the Home Page -->
           <?php
            foreach ( $arrImages as $attachment_id => $attachment ) {
              echo wp_get_attachment_image( $attachment_id, 'rotator' );
            }
           ?>
           </div><!--slider-->
           <div id="slider-frame">
            <img src="https://wordpress.stackexchange.com/questions/50216/<?php echo get_stylesheet_directory_uri(); ?>/img/photo-frame.png" width="394" height="275" />
           </div><!--slider-frame-->
        </div><!--slider-wrapper-->
    <?php endif; ?>
    <?php echo $content; ?>
    </div><!--#entry-content-->
    </div><!--#post-->

To get the custom sized “rotator” image, I added this code to my theme’s functions.php:

if ( function_exists ( 'add_theme_support') ) {
    add_theme_support( 'post-thumbnails' );
    add_image_size( 'rotator', 385, 265, true );
}