Customise JQuery EasySlider plugin numeric output menu to use text string instead?

Question

Hello,

I'm using this plugin: http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

Demo: http://cssglobe.com/lab/easyslider1.7/02.html

Maybe somewhere in here can be altered?

if(options.numeric){            
   for(var i=0;i<s;i++){      
    $(document.createElement("li"))
     .attr('id',options.numericId + (i+1))
     .html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
     .appendTo($("#"+ options.numericId))
     .click(function(){       
      animate($("a",$(this)).attr('rel'),true);
     });

And I was wondering if anyone could tell me how to switch from the auto-generated numbers in the numeric option to a text string of my own? Currently it automatically generates the links for the slider in a list using the slide number as the link text.

I don't know javascript, if that's not obvious... :P

Any tips extremely appreciated!

Answer 1

Looks like here:

if(options.numeric){
    for(var i=0;i<s;i++){
        $(document.createElement("li"))
            .attr('id',options.numericId + (i+1))
            // THIS LINE:
            .html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
            .appendTo($("#"+ options.numericId))
            .click(function(){
                animate($("a",$(this)).attr('rel'),true);
             });
    };
} else { ...

The (i+1) is the number that shows up. If you make an array with the names of your slide, you can replace this with slideName[i]:

var slideName = new Array('foo', 'bar', 'etc');

if(options.numeric){
    for(var i=0;i<s;i++){
        $(document.createElement("li"))
            .attr('id',options.numericId + (i+1))
            // THIS LINE:
            .html('<a rel='+ i +' href=\"javascript:void(0);\">'+ slideName[i] +'</a>')
            .appendTo($("#"+ options.numericId))
            .click(function(){
                animate($("a",$(this)).attr('rel'),true);
             });
    };
} else { ...