Нужно изменить опцию JQuery Cycle updateActivePagerLink - PullRequest
Новая
       8

Нужно изменить опцию JQuery Cycle updateActivePagerLink

2 голосов
/ 04 июня 2010

Я создаю простое слайд-шоу из 3 изображений, и я довольно новичок в Jquery и Cycle. У меня работает слайд-шоу с 3-мя ссылками на пейджеры, которые тоже работают.

Единственное, что мне нужно сделать, это добавить функциональность «activeSlide» к выбранному в данный момент изображению пейджера, чего я не могу сделать в CSS, просто используя класс activeSlide ... потому что я хочу изменить изображение активного пейджера источник ... хотя если бы это были просто простые текстовые числа по умолчанию, я бы присвоил стиль классу activeSlide.

По сути, я хочу поменять местами test-select-off.jpg с test-select-on.jpg, когда этот активный слайдер будет достигнут.

Код цикла: 

$(function() {
    $('#testimonial-features').cycle({  
        speed: 800,
            timeout: '6500',
            pause: 'true',
            pager: '#testimonial-switcher',
            pagerAnchorBuilder: function(idx, slide) { 
             return '#testimonial-switcher li:eq(' + idx + ') a';       
            } 
    });
});

HTML код: 

<div id="testimonial-switcher">
<ul>
    <li><a href="#"><img src="images/layout/test-select-off.jpg" /></a></li>
    <li><a href="#"><img src="images/layout/test-select-off.jpg" /></a></li>
    <li><a href="#"><img src="images/layout/test-select-off.jpg" /></a></li>
</ul>

Как я могу это сделать? Я предполагаю, что мне нужно что-то сделать в опции updateActivePagerLink, изменив функцию updateActivePagerLink, взятую из http://www.malsup.com/jquery/cycle/pager7.html:

$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 
    $(pager).find('li').removeClass('activeLI') 
        .filter('li:eq('+currSlideIndex+')').addClass('activeLI'); 
};

но, как я уже сказал, я все еще изучаю этот синтаксис, поэтому любая помощь будет принята с благодарностью!

1 Ответ

0 голосов
/ 04 июня 2010

РЕДАКТИРОВАТЬ: Очевидно, так как я не был знаком с плагином, мой оригинальный ответ не сработал. Однако, поскольку вы нашли что-то, что частично делает, я обновлю ответ здесь решением, которое должно работать полностью. Все, что вам нужно сделать в дополнение к тому, что вы обнаружили, в начале этой функции, изменить их все на «выкл» (строка 1), а затем изменить активное на «вкл» (то, что вы добавили). 

$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {
    $(pager).find('img').attr('src','images/layout/test-select-on.jpg');
    $(pager).find('li').removeClass('activeLI') 
            .filter('li:eq('+currSlideIndex+')').addClass('activeLI')
            .find('img').attr('src','images/layout/test-select-on.jpg'); 
};

Дайте мне знать, если это работает.

<ч /> Оригинальный неправильный ответ (оставив его так, чтобы комментарии имели смысл)
Похоже, вы можете заменить src из img в зависимости от того, какой li имеет класс .activeLI внутри функции обратного вызова after (хотя я раньше не использовал плагин Cycle и просто почитать последний бит из документации ).

Поэтому измените код цикла на: 

$(function() {
    $('#testimonial-features').cycle({  
        speed: 800,
        timeout: '6500',
        pause: 'true',
        pager: '#testimonial-switcher',
        pagerAnchorBuilder: function(idx, slide) { 
         return '#testimonial-switcher li:eq(' + idx + ') a';       
        },
        after: function(curr, next, opts) {
         $(curr).find('img').attr('src','images/layout/test-select-on.jpg');
        } 
    });
});

И дай мне знать, если это работает! (Примечание: если это не сработает, попробуйте развернуть $() из curr в after: function() ... как я уже говорил, ранее не использовал этот плагин)

...