Susie Posted May 21, 2009 Report Share Posted May 21, 2009 (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! Quote Link to comment Share on other sites More sharing options...
shelfimage Posted May 25, 2009 Report Share Posted May 25, 2009 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 + ' " '; } Quote Link to comment Share on other sites More sharing options...
Susie Posted May 25, 2009 Author Report Share Posted May 25, 2009 Thanks, John. This might work even if there's no way to get it to show text. Quote Link to comment Share on other sites More sharing options...
ir3nicus Posted November 18, 2011 Report Share Posted November 18, 2011 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 Quote Link to comment Share on other sites More sharing options...
falkencreative Posted November 18, 2011 Report Share Posted November 18, 2011 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. Quote Link to comment Share on other sites More sharing options...
ir3nicus Posted November 19, 2011 Report Share Posted November 19, 2011 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) { " Quote Link to comment Share on other sites More sharing options...
falkencreative Posted November 19, 2011 Report Share Posted November 19, 2011 CSS will work. If it isn't, you have an error in the CSS or you aren't targeting the correct element. Quote Link to comment Share on other sites More sharing options...
Mikejm Posted January 9, 2014 Report Share Posted January 9, 2014 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 Quote Link to comment Share on other sites More sharing options...
falkencreative Posted January 10, 2014 Report Share Posted January 10, 2014 @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? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.