Question

我正在使用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>

任何想法如何实现这一目标？感谢

Answer 1

您对服务器端和客户端之间的分离存在误解。 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元素那样添加缩略图的地址，那么你可以在页面构建器类中阅读它们。

与wordpress的Jquery循环插件

1 个答案: