Jump to content
Stef's Coding 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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...