Jquery Cycle Plugin Question - Changing and styling links...

Question

Ok, I have this thing working. Rollover the links and it changes the banner/pic. Fantastic. Question is this: How can I change the text from 1,2,3... to whatever I want? In addition, how can I apply background images, hover, and active treatments. In the example at http://malsup.com/jquery/cycle/pager5.html, I am using the #nav a {blah, blah} to affect the yellow box and border, but when I add an image it does nothing. Furthermore the ability to change the text seems to be buried in the actual Cycle Plugin. Anyone know how to do this?

Here is my code

javascript:

$('#slideshow').cycle({ 
    speed:      200,
    timeout:    0, 
    pager:      '#tabs', 
    pagerEvent: 'mouseover' 
});

CSS (image not showing thought)

#tabs a {
    border-style: none;
    height: 47px;
    width: 192px;
    background-image: url(../images/tabback.png);
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background: none no-repeat scroll 0 0;
    text-decoration:none;
}

and the HTML is not that important but I am spitting out the nav links at @tabs.

Answer 1

To change the text for the pager, supply a function for the pagerAnchorBuilder callback in options. The parameters are the page number and the DOM element. The default anchor is '<a href="#">'+(i+1)+'</a>'. For example, you might use:

$('#slideshow').cycle({ 
    speed:      200,
    timeout:    0, 
    pager:      '#tabs', 
    pagerEvent: 'mouseover',
    options:    {
        pagerAnchorBuilder: function(i,el) {
            return '<a href="#">Page '+(i+1)+'</a>';
        }
    }
});

I'm not sure about the background image but it looks like the later background property is overriding background-image. Does background: none url(../images/tabback.png) no-repeat scroll 0 0; change anything for you?

Answer 2

None of these recs seemed to work so I hacked it a bit. Just hid the #tabs img tag, used #tabs, #tabs a, and #tabs a:hover to get the effect I wanted. Then created a div inside tags that was absolute to get the unique text I wanted. Lastly, changed #tabs a:activeSlide to match #tabs a:hover to get rid of the hover flickering when on the div but over the text.