jQuery Cycle - creating pager links from link inside div

Question

I'm putting together a nav for the front page of a site and I'm trying to get Cycle to use a custom pager link from the link contained inside a div.

Here's my current code:

$('#nav-cycle').before('<ul id="nav">').cycle({ 
    fx:     'turnLeft', 
    speed:  'fast', 
    timeout: 9001,
    pagerEvent: 'click',
    pauseOnPagerHover: 1,
    pager:  '#frontpage-nav', 
    allowPagerClickBubble: true, 
    pagerAnchorBuilder: function(idx, slide) { 
         return '<li><a href="#">' + slide.title + '</a></li>';
    } 
});

I need it to use the href from the link that is contained in each slide's div as the pager link. I found a question that seemed similar to this but without needing to get the link inside.

HTML as requested, with all the PHP stripped:

<div id="frontpage-nav"></div>

<div id="nav-cycle">
<div class="nav-cycle-item" title="(page title)">
<p class="nav-item-description">(page description text)</p>
<span class="page_link"><a href="(link)">(page title)</a></span>
</div>

Colin Brock · Accepted Answer · 2011-11-01T18:30:25.363

1

In the pagerAnchorBuilder function, "slide" refers to the current <div class="nav-cycle-item">. To get the href of each <a> tag within each div, just use a jQuery selector to find the child <a> and get it's href value:

$('#nav-cycle').before('<ul id="nav">').cycle({ 
    fx:     'turnLeft', 
    speed:  'fast', 
    timeout: 9001,
    pagerEvent: 'click',
    pauseOnPagerHover: 1,
    pager:  '#frontpage-nav', 
    allowPagerClickBubble: true, 
    pagerAnchorBuilder: function(idx, slide) { 
        var href = $(slide).children('span').children('a').attr('href');
        return '<li><a href="' + href + '">' + slide.title + '</a></li>';
    } 
});

BTW, I'm assuming you're missing a closing div in your HTML above.

edited Nov 01 '11 at 18:30

answered Nov 01 '11 at 18:25

Colin Brock

21,267
9
46
61

Are you sure `prop` is appropriate? I think you should be using `attr.` http://api.jquery.com/prop/ – mrtsherman Nov 01 '11 at 18:28
This did not work for me until changing pagerEvent to mouseover, but now the transitions are gone when I mouse between the links. I still get them when moving the mouse from the slide to the link though. – kkjelgard Nov 01 '11 at 18:49
@kkjelgard: I'm not sure I understand. What exactly doesn't work? As I understood your question, you want the pager links to contain the same `href` value as the `a` tags contained within the slides, correct? That's what the above code does. Here is a jsFiddle with an extremely simplified demo: http://jsfiddle.net/DVVrr/1/ Can you provide more detail about what it is you're looking for? – Colin Brock Nov 01 '11 at 19:11
Your code works for what I am asking in this post, so I will mark it answered. Thank you for your help! The issue now (which I think may have been happening before as well) is that there is no transition when I drag my mouse between the pager links. I'll try to keep looking if you don't know of a quick fix. – kkjelgard Nov 01 '11 at 19:24
@kkjelgard: I'm happy to help. I can't seem to replicate your latest problem though: http://jsfiddle.net/DVVrr/3/ When I mouseover each pager link, I see the next slide transition in from the left. Am I missing something? Can you create a jsFiddle that replicates the problem? – Colin Brock Nov 01 '11 at 19:26
I searched around and found a fix for it - seems like padding can sometimes break the transitions. In that example I'm seeing it too, sometimes the transition is skipped when moving between the links depending on direction and how fast you're doing it. – kkjelgard Nov 01 '11 at 21:36
@kkjelgard: Ah, well, I'm glad you got it figured out. – Colin Brock Nov 01 '11 at 21:39

jQuery Cycle - creating pager links from link inside div

1 Answers1