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

Menzies

Answer 1

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.

Pelag

Exactly. You're the man! Quite a handsome fella too. Thanks again! – Menzies

Answer 2

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

Ketene

Answer 3

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

Bid

This worked great for me. I had trouble finding the image source as it was inside an <li> tag. Upvoted. – Catkin

you forgot the beginning and closing tag < >, anyway I am thankful that i got her in your post. thank you it help me. – Whitesell

Answer 4

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>

Cumbrance

This works great, how can I add an active css class to the active thumb item? Thanks – Familiar

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? – Cumbrance