Question

I’m using “jquery cycle plugin” with WP theme and working fine, but i can’t make it generate control thumbs dynamically from custom field …
here the code :

$(function() {
$('#featured').cycle({
    fx:      'fade',
    pager:   '#feat_nav',
    timeout:  4000,
    rev:           true,
    pagerAnchorBuilder: pagerFactory
});

function pagerFactory(idx, slide) {
    var s = idx > 2 ? ' style=""' : '';
    return '<li'+s+'><a href="#"><img src="<?php echo get_post_meta($post->ID, 'img', true) ;?>" alt=""></a></li>'; //  this is just an example for what i need to display 
};
});

html

<ul id="featured">
<?php while (have_posts()) : the_post(); ?>
      <li>
        <div class="caption-bottom">
        <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
        </div>
        <img src="" alt="" />
     </li>
   <?php  endwhile; wp_reset_query();?>   
   </ul>

  <ul id="feat_nav"></ul>

any idea how to make this happen ?
thanks

Answer 1

You have a misunderstanding of the separation between the server side and client. The pageAnchorBuilder event will only read the client side so what you need to do is populate the src of the thumbnails somewhere on your slide. If the img is included on your slide you can search for it or you could use a data-attribute to specify it on the slide element (a little easier). They can be images, an attribute, or however else you want to do it.

Here is a demo of the idea: http://jsfiddle.net/lucuma/ghe35/1/

<ul id="featured">
<?php while (have_posts()) : the_post(); ?>
      <li data-thumb='<?php echo get_post_meta($post->ID, 'img', true) ;?>'>
        <div class="caption-bottom">
        <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
        </div>
        <img src="" alt="" />
     </li>
   <?php  endwhile; wp_reset_query();?>   
   </ul>

  <ul id="feat_nav"></ul>

function pagerFactory(idx, slide) {
    var s = idx > 2 ? ' style=""' : '';
    return '<li'+s+'><a href="#"><img src="' + $(slide).attr('data-thumb') + '" alt=""></a></li>'; //  this is just an example for what i need to display 
};

I’m not sure about the actual php above but if you can add the address of the thumbnail image like I did to each li element, then you can read those in the page builder class.