jQuery cycle thumbnails?

Question

jQuery cycle thumbnails ?

Hi all

I have a demo here (not in Wordpress) where I'm using the jQuery cycle plugin to create the slideshow and the thumbnails.

http://www.ttmt.org.uk/forum/wordpress/

I want to create the same thing in Wordpress

http://www.ttmt.org.uk/wordpress/

Here I have one page with the images added directly to the content of the page.

I'm using the same cycle code as the non-wordpress page.

The image placeholders are added for the thumbnails but not the images.

Can anyone see why the thumbnails are not shown?

Is there another way to do this.

I tried to use Wordpress plugins to do this but they all limited the slideshow images to being the same dimensions. I need the images to be different sizes.

--UPDATE--

The home page has this php that simply outputs the page content. The images have been added directly to the page

<div id="content">    


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



  <div id="slideshow">

    <?php the_content(); ?>

  </div><!-- #slideshow -->  

  <div id="thumbWrap">
  <ul id="thumbs">

  </ul>
</div>


<?php endwhile; endif;?>  

</div><!-- #content -->

This the jquery I'm using to try and create the thumbnails. I'm using Timthumb to resize the thumbs.

<script type="text/javascript">

  $(window).load(function() {
   $('#slideshow').cycle({
        fx: 'fade',
        speed: 800,
        timeout: 3000,
        pause:     1,
        pager:  '#thumbs', 

        pagerAnchorBuilder: function(idx, slide) { 
            return '<li><a href="#"><img class="imgThumb" src="<?php bloginfo('template_directory'); ?>/thumb/thumb.php?src="' + slide.src + '"&amp;h=50&amp;w=50px&amp;zc=1" /></a></li>'; 
        } 
    });

});


</script>

Answer 1

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="<?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 );
}