0

我正在使用带有 WP 主题的“jquery 循环插件”并且工作正常，但我不能让它从自定义字段动态生成控制拇指......这里的代码：

$(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>

知道如何做到这一点吗？谢谢

4

1 回答 1

0

您对服务器端和客户端之间的分离存在误解。pageAnchorBuilder 事件只会读取客户端，因此您需要做的是在幻灯片的某处填充缩略图的 src。如果 img 包含在您的幻灯片中，您可以搜索它，或者您可以使用数据属性在幻灯片元素上指定它（更容易一些）。它们可以是图像、属性或您想要的任何其他方式。

这是这个想法的演示：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 
};

我不确定上面的实际 php，但如果您可以像我对每个 li 元素所做的那样添加缩略图的地址，那么您可以在页面构建器类中阅读这些地址。

于 2012-05-27T15:29:10.510 回答