CODEWITHSUNDEEP
jqueryexpressionenginejquery-cycle
silentparty
silentparty

Reputation: 21

jQuery Cycle creating too many pager links

I've searched and search but can't seem to find any decent results for this query.

Basically I have pages being pulled in via ajax - including images - but jquery cycle is creating a ton of entries for the pager, and only some of the links work. However, if I target the images more specifically (just targeting #images instead of #img-container #images), the pager counts correctly, but then the pager links don't work. It's driving me nuts!

The HTML output from expressionengine is sound, it's just placing all the img tags from the query inside the #images div with no problems. All very clean.

Here's the 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',
      });
}

And the HTML (minus the other expressionengine stuff):

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

Here's the result of an instance with 9 images: http://cl.ly/2Q25292L1u222a333y2Q

And how it looks in firebug (fine as far as I can tell, minus the img-nav being flooded with 'a' tags, hence why it's closed): http://cl.ly/3a402X3q1Q2r0q0i2m1u

Any help would be immensely appreciated. I apologise in advance if there's anything amiss with my post, I'm a first-timer here :)

Many thanks, Marcel

Upvotes: 2

Views: 795

Answers (1)

Judd Lyon
Judd Lyon

Reputation: 538

rjb is right, the PageAnchorBuilder function controls the pager and it depends on how you're generating the markup.

One way to do this is with Matrix, and call the Channel Field loop twice: once for the images, once for the pager.

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

Upvotes: 1

Related Questions