Jump to content
Killersites Community
Susie

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

Recommended Posts

(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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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) {

"

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×