jQuery Cycle pagerAnchorBuilder

Question

I'm using the Cycle plugin for use in a news-rotator. This means I'm using Div's to populate the slides instead of images.

My ultimate goal is to make a pager where instead of the usual 1, 2, 3, 4, etc. - it instead returns the first H3 tag in the slide.

I know this probably a minor selection issue, but here's what I'm using so far:

$('#scroll_wrap').cycle({
        fx: 'fade',
        pager: '#pager',
        pagerAnchorBuilder: function(idx, slide) { 
                return '<li><a href="#">' + slide.children("h3").textContent + '</a></li>';
        }

I've also tried something like this:

    $('#scroll_wrap').cycle({
    fx: 'fade',
    pager: '#pager',
    pagerAnchorBuilder: function(idx, slide) { 
            var h3 = $('div',slide).children('h3');
            return '<li><a href="#">' + slide.h3 + '</a></li>';
    }

As you can probably tell, I'm still a fledgling. :/

Can anyone help me out with the seleciton??

score 14 · Accepted Answer · answered Sep 02 '09 at 23:07

Change the one line in your pagerAnchorBuilder function to this:

return '<li><a href="#">' + jQuery(slide).children("h3").eq(0).text() + '</a></li>';

Three things needed to be changed:

slide => jQuery(slide)
Because jQuery doesn't extend elements with its helper functions unless you tell it to. This is an unfortunate side-effect of jQuery not extending the prototypes of natives (like Element). It means you have to wrap every third thing in your code with jQuery(x).

children("h3") => children("h3").eq(0)
Because selectors return arrays of objects matched, you should grab the first one after you do the selector otherwise the following method call in the chain will act on the set of elements. Jquery should offer things like .firstChild("h3").

textContent => .text()
textContent is a mozilla thing, and wont work on some browsers. Use jQuery's .text() method here. In this case jQuery did nothing wrong.

Exactly. You're the man! Quite a handsome fella too. Thanks again! — Casey Wight, Sep 02 '09 at 23:55

score 4 · Answer 2 · answered Feb 21 '11 at 14:57

I have tried with this, and worked:

$(function() {
$('#featured .container').before('<ul id="nav">').cycle({
    fx: 'scrollLeft',
    speed: 300,
    timeout: 5000, 
    next: '.next',
    prev: '.previous',
    pager:  '#nav',
    pagerAnchorBuilder: function(idx, slide) {
      var img = $(slide).children('.thumb').children().eq(0).attr("src");
      return '<li><a href="#"><img src="' + img + '" width="50" height="50" /></a></li>';
    }


});

Sougata

score 4 · Answer 3 · edited Mar 16 '11 at 22:43

4

This is the solution for search into any DOM element:

pagerAnchorBuilder: function(idx, slide) {
  return '<li><a href="#"> img src="' + jQuery(slide).find('img').attr('src') + '" width="70" height="50" / </a></li>';
}

edited Mar 16 '11 at 22:43

Kirk Woll

76,112
22
180
195

answered Mar 16 '11 at 22:40

dannyfilth

41
1

This worked great for me. I had trouble finding the image source as it was inside an `
` tag. Upvoted.

AndyWarren

Mar 03 '13 at 15:53

you forgot the beginning and closing tag `< >`, anyway I am thankful that i got her in your post. thank you it help me. – jhunlio Aug 01 '14 at 03:49

score 3 · Answer 4 · answered May 01 '12 at 19:46

I'm posting this, because this question comes up as a high rank. I think my solution is much more robust.

I moved away from the whole pageanchorbuilder thing, it's way to cumbersome for doing anything fancy. This is what I found worked better and gives you much more control over the thumbs.

First build out your Cycle stage and thumb tray like this:

<div class="gallery">
    <div class="stage">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
    </div>
    <div class="thumb-tray">
        <div class="thumb">Anything in here</div>
        <div class="thumb">Anything in here</div>
        <div class="thumb">Anything in here</div>
    </div>
</div>

Then use this JS to link the thumbnails to the slides. Basically, thumb 1 links to slide 1 and so on.

// Start Cycle
jQuery('.stage').cycle({ 
    timeout:  0,
});

// Make the thumbs change the stage on click
jQuery('.gallery .thumb').click(function(){
    var thumbIndex = jQuery(this).closest('.gallery').find('.thumb').index(jQuery(this));
    jQuery(this).closest('.gallery').find('.stage').cycle(thumbIndex);
});

This will work with multiple Cycle gallery's on a page too. Keep in mind the slides don't have to be images. They stage could be built like this:

    <div class="stage">
        <div class="slide">Slide 1</div>
        <div class="slide">Slide 2</div>
        <div class="slide">Slide 3</div>
    </div>

This works great, how can I add an active css class to the active thumb item? Thanks — Mark, Dec 20 '12 at 08:01
Mark, do you mean an active class when you click a thumb? Or an active class that updates if Cycle is set to auto-cycle? — Drew Baker, Dec 20 '12 at 19:40

jQuery Cycle pagerAnchorBuilder

4 Answers4

Linked