JQuery Cycle Plugin Вопрос - Изменение и стилизация ссылок

Question

Хорошо, у меня эта штука работает. Переверните ссылки, и это изменит баннер / рис. Фантастика. Вопрос в следующем: как я могу изменить текст с 1,2,3 ... на то, что я хочу? Кроме того, как я могу применять фоновые изображения, наведения и активные процедуры. В примере на http://malsup.com/jquery/cycle/pager5.html, я использую #nav a {blah, blah}, чтобы повлиять на желтое поле и границу, но когда я добавляю изображение, оно ничего не делает. Кроме того, возможность изменить текст, похоже, скрыта в самом плагине цикла. Кто-нибудь знает, как это сделать?

Вот мой код

JavaScript:

$('#slideshow').cycle({ 
    speed:      200,
    timeout:    0, 
    pager:      '#tabs', 
    pagerEvent: 'mouseover' 
});

CSS (изображение без мысли)

#tabs a {
    border-style: none;
    height: 47px;
    width: 192px;
    background-image: url(../images/tabback.png);
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background: none no-repeat scroll 0 0;
    text-decoration:none;
}

и HTML не так важен, но я выкладываю навигационные ссылки на @tabs.

Answer 1

Чтобы изменить текст для пейджера, укажите функцию для обратного вызова pagerAnchorBuilder в options . Параметры - это номер страницы и элемент DOM. Якорь по умолчанию - '<a href="#">'+(i+1)+'</a>'. Например, вы можете использовать:

$('#slideshow').cycle({ 
    speed:      200,
    timeout:    0, 
    pager:      '#tabs', 
    pagerEvent: 'mouseover',
    options:    {
        pagerAnchorBuilder: function(i,el) {
            return '<a href="#">Page '+(i+1)+'</a>';
        }
    }
});

Я не уверен насчет фонового изображения, но похоже, что более позднее свойство background переопределяет background-image. background: none url(../images/tabback.png) no-repeat scroll 0 0; что-нибудь меняет для тебя?

Answer 2

Ни одна из этих записей не работала, поэтому я немного ее взломал. Просто спрятали тег #tabs img, использовали #tabs, #tabs a и #tabs a: hover, чтобы получить желаемый эффект. Затем создал тег div внутри тега, который был абсолютным, чтобы получить уникальный текст, который я хотел. Наконец, изменили #tabs a: activeSlide, чтобы он соответствовал #tabs a: hover, чтобы избавиться от мерцания при наведении курсора на элементе div, но над текстом.