jQuery Cycle Plugin & Wordpress - How to get caption from div that contins the_title() and the_excerpt()

jQuery Cycle Plugin & Wordpress - How to get caption from div that contins the_title() and the_excerpt()

Hi,

I'm trying to use jQuery Cycle Plugin within a theme that I'm currently developing. I've got the jQuery Cycle to display slideshow of post images on the home page. However, my problem is that I can't get it to display the content of a div that contains the_title() and the_excerpt() as a caption correctly.
I'm using the following code:

  1.     <script>
  2.         $(function() {
  3.             $('#slideshow').cycle({
  4.                 fx:       'fadeZoom',
  5.                 timeout:   2000,
  6.                 after: onAfter
  7.             });
  8.         });
  9.         function onAfter(curr,next,opts) {
  10.             var caption = $('.featured-entry').text();
  11.             $('#caption').html(caption);
  12.         }
  13.     </script>
  14.    
  15.     <div id="container">
  16.         <div class="pics" id="slideshow">
  17.             <?php
  18.                 $slideshow_posts = new WP_Query('cat=3&posts_per_page=5');
  19.                 while($slideshow_posts->have_posts())
  20.                     $slideshow_posts->the_post();
  21.                     $picture = get_post_meta($post->ID, 'picture', true);
  22.                     if(!empty($picture))
  23.                     {
  24.                     ?>
  25.                         <div class="slideshow-inner">
  26.                             <a class="featured-article" href="<?php the_permalink(); ?>"><img src="<?php echo $picture; ?>" /></a>
  27.                             <div class="featured-entry">
  28.                                 <a class="entry-title" href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
  29.                                 <div class="entry-summary"><?php the_excerpt() ?></div>
  30.                             </div>
  31.                         </div>
  32.                     <?php
  33.                     }
  34.                 }
  35.             ?>
  36.         </div>
  37.         <div id="caption"></div>
  38.     </div>

The problem with this code is that it only displays the_excerpt of one post for all slides. Meaning that the_excerpt does not change when the image changes.

So what's I'm missing? This is my first work with jQuery, and I hope someone could help me with this.

P.S. I know how to get caption from img's attributes such as 'alt', but I don't want to do it that way and I want to get the caption from the content of a div.

Regards

-XO














    • Topic Participants

    • xo39