Thursday, April 21, 2011

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

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!

From stackoverflow
  • 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 { ...
    
    McFly88 : You are so awesome. Thank you so much!!

0 comments:

Post a Comment