Изменить числовое значение на текстовое - jQuery / NivoSlider

Question

Я пытаюсь изменить числовую навигацию, в приведенном ниже примере, на фактические текстовые ссылки.

Так что '1' может быть 'Football', '2' может быть 'Ice Hockey' и так далее....

Как мне добиться этого, используя код NivoSlider ?

Я переместил код в JSFiddle: http://jsfiddle.net/JSNuU/, если этополезно.

Буду очень признателен за помощь.

Answer 1

Плагин, кажется, не поддерживает это.Однако вы можете использовать цикл jQuery для взлома новых меток после того, как плагин создал их:

Answer 2

К сожалению, Nivo не предоставляет хук для управления навигацией, кроме как заменить его серией изображений.Числа жестко запрограммированы в:

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

Однако вы можете изменить их по факту, если хотите: jsFiddle

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

Answer 3

nivo не поддерживает это, но после быстрого просмотра их несжатого источника его можно легко добавить. В строке 168 после проверки, переключены ли большие пальцы, она имеет следующую простую строку:

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

Это можно адаптировать следующим образом:

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

Или alt или name или даже атрибут данных:

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

не то, чтобы кто-то хотел бы потратить столько времени, чтобы исправить это для чего-то, что вы действительно используете один или два раза. ;)

если вы это сделаете, не забудьте повторно сжать его после факта, чтобы улучшить скорость загрузки.