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.

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>
share|improve this question
1  
you'll need to provide at least the code that is generating the markup. your image says the src is undefined. –  helgatheviking Apr 25 '12 at 18:16
    
Sorry I don't have enough reputation to add more links or code. Can you see the code from the source of the links added? –  user668499 Apr 25 '12 at 20:09
    
you can paste in the php. surely you don't need rep for that. the links show us the output but not how it was created. probably why you have no answers, no one can help without more info. –  helgatheviking Apr 26 '12 at 14:38

2 Answers 2

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 );
}
share|improve this answer
    
Thanks for that cpilko but it doesn't really cover what I was asking for. I need a way to generate thumbnails using cycle. Doesn't have to be cycle, any method to produce a slideshow with thumbnails. –  user668499 Apr 27 '12 at 6:54
    
You are doing something, but your pagerAnchorBuilder function is a mess. (Hint: You need to keep your jQuery variable inside the single quotes). Why not change back to back to what you have on your forum page? If you need different sized images, do the math in jQuery to get your resultant image sizes? –  cpilko Apr 27 '12 at 12:21

You say "The home page has this php that simply outputs the page content. The images have been added directly to the page". But how is that page being displayed? Are you using home.php template file to generate the page? Or are you using the WordPress Backend settings > Reading section to choose the page to display? From what your saying, it sounds like the site isn't pulling your images. When you view the actual page, what does the source code look like? Are the images being pulled into it?

If you are using home.php to generate the homepage, you need to tell wordPress what post or page ID to use before you do the loop.

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.