Цикл jQuery создает слишком много ссылок на пейджеры - PullRequest
2 голосов
/ 18 января 2012

Я искал и искал, но не могу найти достойных результатов по этому запросу.

В основном у меня есть страницы, загружаемые через ajax - включая изображения - но цикл jquery создает массузаписи для пейджера, и только некоторые ссылки работают.Однако, если я нацеливаюсь на изображения более конкретно (просто нацеливаясь на #images вместо # img-container #images), пейджер считает правильно, но тогда ссылки на пейджер не работают.Это сводит меня с ума!

Вывод HTML из expressionengine - это звук, он просто без проблем помещает все теги img из запроса в div #images.Все очень чисто.

Вот 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 (за исключением других вещей, связанных с выражением):результат экземпляра с 9 изображениями: http://cl.ly/2Q25292L1u222a333y2Q

И как это выглядит в firebug (хорошо, насколько я могу судить, минус img-nav, залитый тегами 'a', поэтому он и закрыт): http://cl.ly/3a402X3q1Q2r0q0i2m1u

Любая помощь будет очень признательна.Заранее прошу прощения, если что-то не так с моим постом, я здесь первый раз:)

Большое спасибо, Марсель

1 Ответ

1 голос
/ 03 мая 2012

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';
       }
    });
...