CODEWITHSUNDEEP
javascriptjqueryhtmlslideshownivo-slider
michaelmcgurk
michaelmcgurk

Reputation: 6509

Change Numeric Value to Text - jQuery / NivoSlider

I'm trying to change the numeric navigation, in the example below, to actual text links.

So '1' could be 'Football', '2' could be 'Ice Hockey' and so on...

How do I achieve this using the NivoSlider code?

I have moved the code to JSFiddle: http://jsfiddle.net/JSNuU/ in case this is more helpful.

I would really appreciate some help with this.

Upvotes: 0

Views: 1290

Answers (3)

Joseph Marikle
Joseph Marikle

Reputation: 78520

nivo does not support this, but after a quick look at their uncompressed source it could be added in easily. On line 168 after checking if thumbs are toggled, it has this simple line:

nivoControl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');

This can be adapted as such:

nivoControl.append('<a class="nivo-control" rel="'+ i +'">'+ kids.eq(i).attr("title") +'</a>');

Or alt or name or even a data attribute:

nivoControl.append('<a class="nivo-control" rel="'+ i +'">'+ kids.eq(i).data("caption") +'</a>');

not that anyone would want to take that much time to fix this for something you only really use once or twice. ;)

if you do though, be sure to re-compress it after the fact to improve download speed.

Upvotes: 0

Blazemonger
Blazemonger

Reputation: 92893

The plugin doesn't seem to support this. However, you can use a jQuery loop to hack in the new labels after the plugin has created them:

jQuery('.nivo-controlNav').each(function() { // in case there's more than one
    var arrLinks = ['one','two','three','four'];
    jQuery(this).children('a').each(function(i,el) {
        jQuery(el).text(arrLinks[i]);
    });
});

http://jsfiddle.net/mblase75/JSNuU/5/

Upvotes: 1

Sinetheta
Sinetheta

Reputation: 9429

Unfortunately Nivo does not provide a hook to control the navigation, other than to replace it with a series of images. The numbers are hard-coded in:

nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('rel') + '" alt="" /></a>');

You can however change them after-the-fact if you'd like: jsFiddle

var navNames = ['one','two','three','four'];
jQuery('.nivo-control').each(function(i){
    $(this).text( navNames[i] )
})

Upvotes: 1

Related Questions