jQuery的週期插件與WordPress

Question

我使用「的jQuery插件週期」與WP主題和工作正常，但我不能讓它從自定義字段動態生成控制大拇指... 這裏的代碼：

$(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，您可以搜索它，也可以使用data-attribute在幻燈片元素上指定它（稍微簡單一點）。它們可以是圖像，屬性或其他你想要做的。

這裏是思想的演示：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元素添加縮略圖的地址，然後你可以閱讀頁面生成器類中的那些。