jQuery Cycle 创建了太多的寻呼机链接答案

【问题标题】：jQuery Cycle creating too many pager linksjQuery Cycle 创建了太多的寻呼机链接
【发布时间】：2012-01-18 01:02:02
【问题描述】：

我已经搜索和搜索，但似乎找不到任何适合此查询的结果。

基本上，我通过 ajax 拉入页面 - 包括图像 - 但 jquery 循环正在为寻呼机创建大量条目，并且只有一些链接有效。但是，如果我更具体地针对图像（仅针对#images 而不是#img-container #images），则寻呼机计数正确，但是寻呼机链接不起作用。快把我逼疯了！

表达式引擎的 HTML 输出是正确的，它只是将查询中的所有 img 标签放在 #images div 中，没有任何问题。都很干净。

这是 jQuery：

 $.ajax({
 type: "POST",
 url: "url_is_here",
 data: {'entryId':entryId},
 success: function(data){
      $("#work .entry").html(data);
      $('#img-container #images').cycle({
            fx:     'fade',
            speed:  'slow',
            timeout: 5000,
            pause:  1,
            pager:  '.img-nav',
      });
}

还有 HTML（减去其他表达式引擎的东西）：

<div id="img-container">
<div id="images">
    {work-images}{exp:imgsizer:size image="{image}" width="600" alt="{caption}"}{/work-images}  </div>
<div class="img-nav">
</div>

这是一个包含 9 个图像的实例的结果： http://cl.ly/2Q25292L1u222a333y2Q

以及它在 firebug 中的外观（据我所知，还不错，减去被“a”标签淹没的 img-nav，因此它被关闭了）： http://cl.ly/3a402X3q1Q2r0q0i2m1u

任何帮助将不胜感激。如果我的帖子有任何问题，我提前道歉，我是第一次来这里:)

非常感谢，马塞尔

【问题讨论】：

您的分页导航是由 ExpressionEngine 还是由 jQuery Cycle 构建的？您可能只需要为您的自定义寻呼机链接编写一个pagerAnchorBuilder 函数。查看带有 HTML/CSS 和 JavaScript 输出的 jsFiddle 会很有帮助，因此我们可以更好地理解您的标记。

标签： jquery expressionengine jquery-cycle

【解决方案1】：

rjb 是对的，PageAnchorBuilder 函数控制寻呼机，这取决于您生成标记的方式。

一种方法是使用 Matrix，并调用 Channel Field 循环两次：一次用于图像，一次用于寻呼机。

    {!-- SLIDE IMAGES --}
    <div id="cycle">
        {cf_slide_tag_pair}
            <a href="{slide_link}"><img src="{slide_image}" /></a>
        {/cf_slide_tag_pair}
    </div>

    {!-- PAGER --}
    <ul id="pager">
        {cf_slide_tag_pair}
          <li><a href="#">{slide_title}</a></li>
        {/cf_slide_tag_pair}
    </ul>

    {!-- CYCLE CALL --}
    $('#cycle').cycle({
       activePagerClass: 'active',
       pager: '#pager',
       pause: 1,
       speed: 'fast',
       timeout: 22000,
       pagerAnchorBuilder: function(index, slide) {
         return '#pager li:eq('+(idx)+') a';
       }
    });

【讨论】：