Jquery Cycle Plugin: Use text instead of numbers in Pager?

[Susie]

(Ben, I hope you're reading this today!! )

 

Does anyone know if it's possible to substitute text for the numbers in the nav on the Pager version of the cycle plugin?

 

Jquery Cycle Plugin - http://malsup.com/jquery/cycle/int2.html - Scroll down to the 2nd set up examples.

 

What I want to do is put the name of the image instead of having just a generic number.

 

Possible? If so, how? TIA!

[shelfimage]

a thumbnail list can be generated (http://malsup.com/jquery/cycle/pager2.html) so maybe just changing this line will generate a text link:

 

// callback fn that creates a thumbnail to use as pager anchor

pagerAnchorBuilder: function(idx, slide) {

return '

" ' + slide.src + ' "

';

}

[Susie]

Thanks, John. This might work even if there's no way to get it to show text.

[ir3nicus]

Hi. I have another question. I want to use an image instead of numbers too.

 

$(document).ready(function() {
   $('#promo2').cycle({
	fx: 'fade',
       timeout: 6000,
	pager: "#nav",
	pagerAnchorBuilder: function(idx, slide) { 
			return '<a href="#"><img src="images/ball2.png" width="13" heigth="13" /></a>';
	}

});
});

 

What about when I would like to use another image when the a tag is active ?

Is it possible to do that?

Thanks in advance

[falkencreative]

What about when I would like to use another image when the a tag is active ?

Is it possible to do that?

Thanks in advance

What I've done in the past is to give the a tag display:block, hide the text with a negative text-indent, and add a background image. Since the cycle plugin adds a class to the active page number, this also allows me to use a different background image for the active item.

[ir3nicus]

Ok but should I use live or delagate jquery function to add it?

 

Using only css styles don't work:

 

#nav a.activeSlide { display: block; ... }

Is there any js tag to change activeSlide ?

 

"

pagerAnchorBuilder: function(idx, slide) {

"

[falkencreative]

CSS will work. If it isn't, you have an error in the CSS or you aren't targeting the correct element.

[Mikejm]

Hi,

 

I know this is an old thread but I searched around and can't find much about custom pagers.

 

Is there a way to do this in Cycle2? I want a custom image for each of the pagers which change to another custom image when each slide is activated.

 

Thanks

[falkencreative]

@Mikejm

 

Assuming you are meaning one custom image that's used on each pager item, yes, you should be able to do this with CSS by setting the <a> element to display:block, setting a fixed height/width, and adding a background image. Cycle2 adds a class to the active pager item, so you can use that class to chance the background image.

 

Hope that helps get you started?