Jump to content


Photo

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


  • Please log in to reply
8 replies to this topic

#1 Susie

Susie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,359 posts
  • LocationColumbus, OH

Posted 21 May 2009 - 12:12 PM

(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/jq...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!
  • 0

#2 shelfimage

shelfimage

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,112 posts
  • LocationNashville

Posted 25 May 2009 - 10:16 AM

a thumbnail list can be generated (http://malsup.com/jq...cle/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 + ' "

  • ';
    }
    • 0

    #3 Susie

    Susie

      Advanced Member

    • Advanced Member
    • PipPipPipPip
    • 3,359 posts
    • LocationColumbus, OH

    Posted 25 May 2009 - 06:02 PM

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

    #4 ir3nicus

    ir3nicus

      New member

    • New Members
    • 2 posts

    Posted 18 November 2011 - 10:52 AM

    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
    • 0

    #5 Ben

    Ben

      Administrator

    • Administrators
    • 5,649 posts
    • LocationChico, CA

    Posted 18 November 2011 - 12:13 PM

    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.
    • 0
    Benjamin Falk
    Falken Creative : Twitter

    #6 ir3nicus

    ir3nicus

      New member

    • New Members
    • 2 posts

    Posted 19 November 2011 - 12:56 PM

    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) {
    "
    • 0

    #7 Ben

    Ben

      Administrator

    • Administrators
    • 5,649 posts
    • LocationChico, CA

    Posted 19 November 2011 - 01:38 PM

    CSS will work. If it isn't, you have an error in the CSS or you aren't targeting the correct element.
    • 0
    Benjamin Falk
    Falken Creative : Twitter

    #8 Mikejm

    Mikejm

      New member

    • New Members
    • 1 posts

    Posted 09 January 2014 - 04:25 PM

    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
    • 0

    #9 Ben

    Ben

      Administrator

    • Administrators
    • 5,649 posts
    • LocationChico, CA

    Posted 09 January 2014 - 09:22 PM

    @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?
    • 0
    Benjamin Falk
    Falken Creative : Twitter




    0 user(s) are reading this topic

    0 members, 0 guests, 0 anonymous users