Grow your CSS skills. Land your dream job.

Jquery Cycle: Assign id to pager numbers

  • # February 19, 2010 at 11:38 am

    I’m am trying to do a version of this pager:
    http://malsup.com/jquery/cycle/pagerHover.html

    However, I need to be able to assign a unique background image to each of the numbers in the pager. I assume this means I need the js to create a unique id for each number as it builds the pager so I can target it with css, but I can’t seem to figure out how to do this.

    Any help would be greatly appreciated.

    # February 20, 2010 at 3:21 am

    ok here is my first replay on this forum so i hope that it would be helpful :

    i dont really understand what you are trying to accomplish with what you asked for but here is what im thinking you are trying to do is to make a custom shape for each of the page number
    so
    if that what you want there is 2 way i can think about them at the moment

    first we will make our pager i assume that you have don it already.
    then we will go and create a variable thats contains the number of pages
    and watch the (-1) to make the element index[0] counted ;

    Code:
    var ancors= $(‘#nav a’).length-1;

    then we will create a for loop for handle the anchor elements of the pager
    and within this for loop we will change the css background value for each element .

    Code:
    for (i = 0; i < = anco; i++)
    {
    $('#nav a:eq('+ i +')').css('background','url(images/pager/pagenumber'+ i +'.png)');
    }

    and now all what you have to do is to create the folder image/pager and then put there your images for the pager and name them
    pagenumber(the page number).png
    eg:pagenumber5.png

    and dont forget to change the css value for the activepage

    and the other way is like this one you will change the contents of this element (the anchor) to an img value without have to change any css background for each page

    if there is some thing that you dont get it please let me know

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".