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 whe

Answer 1

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:

    

        
        
        
    
    

        
Anything in here
        
Anything in here
        
Anything in here
    

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:

    

        
Slide 1
        
Slide 2
        
Slide 3