Jquery Cycle Plugin Question - Modification et style des liens

Question

Ok, j'ai cette chose qui fonctionne. Survolez les liens et cela change la bannière/image. Fantastique. La question est la suivante: Comment puis-je changer le texte de 1,2,3 ... à ce que je veux? En outre, comment puis-je appliquer des images de fond, planer et des traitements actifs. Dans l'exemple de http://malsup.com/jquery/cycle/pager5.html, j'utilise #nav a {blah, blah} pour affecter la boîte jaune et la bordure, mais quand j'ajoute une image, elle ne fait rien. De plus, la possibilité de changer le texte semble être enterrée dans le Plugin Cycle actuel. Quelqu'un sait-il comment faire ça?

Voici mon code

javascript:

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

CSS (image ne montrant la pensée)

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

et le code HTML est pas important, mais je suis crachant les liens de nav à @tabs.

Answer 1

Aucun de ces recs ne semblait fonctionner, alors je l'ai piraté un peu. Juste caché la balise #tabs img, utilisé #tabs, #tabs a, et #tabs a: hover pour obtenir l'effet que je voulais. Puis créé un div à l'intérieur des balises qui était absolu pour obtenir le texte unique que je voulais. Enfin, a changé #tabs a: activeSlide pour correspondre à #tabs a: hover pour se débarrasser du scintillement hover lorsque sur le div, mais sur le texte.

Answer 2

Pour modifier le texte du pager, fournissez une fonction pour le rappel pagerAnchorBuilder dans options. Les paramètres sont le numéro de page et l'élément DOM. L'ancre par défaut est '<a href="#">'+(i+1)+'</a>'. Par exemple, vous pouvez utiliser:

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

Je ne suis pas sûr de l'image d'arrière-plan, mais il semble que la propriété de fond plus tard est PRÉPONDÉRANTS background-image. Est-ce que background: none url(../images/tabback.png) no-repeat scroll 0 0; change quelque chose pour vous?