Как изменить порядок изображений, показанных в слайд-шоу jQuery Cycle, во время воспроизведения? - PullRequest
Новая
       25

Как изменить порядок изображений, показанных в слайд-шоу jQuery Cycle, во время воспроизведения?

1 голос
/ 21 февраля 2011

Так что мой вопрос довольно прост. Скажем, у меня есть слайд-шоу с переходами 'fade', всего 10 картинок, и у меня также есть типичные кнопки Next / prev. Слайд-шоу автоматически переключается с изображения 1 на изображение 10. Как сделать так, чтобы пользователь мог в любой момент изменить порядок воспроизведения? Например, при просмотре изображения 6 пользователь нажимает кнопку «prev» (или, если необходимо, новую кнопку), а после возврата к изображению 5 слайд-шоу продолжается с изображения 4, 3, 2 ...

Это вообще возможно? Я прочитал и попробовал опцию 'rev' в Cycle, но я не смог заставить ее работать, и на самом деле я не уверен, что она мне нужна.

Спасибо за любые идеи!

1 Ответ

2 голосов
/ 21 февраля 2011

Глядя на источник, похоже, что опция rev предназначена только для анимации, которая не применяется к затуханию. Вот точный комментарий: 

// causes animations to transition in reverse (for effects that support it such as scrollHorz/scrollVert/shuffle)

Возможно, вы ищете в обратном направлении : 

// true to start slideshow at last slide and move backwards through the stack

Попробуйте установить значение true, если хотите изменить порядок.

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

function toggleDirection(){
    // replace your_slide_div with whatever your div is named
    $('.your_slide_div').cycle("toggleDirection");
}

Затем в файле JS плагина цикла найдите функцию handleArguments (продолжение, опции, arg2) . В операторе switch добавьте регистр: 

case "toggleDirection":
        $(cont).data('cycle.opts').backwards = $(cont).data('cycle.opts').backwards ? false : true;
        if($(cont).data('cycle.opts').backwards)
            $(cont).data('cycle.opts').nextSlide = 
                $(cont).data('cycle.opts').nextSlide - 2 < 0 ? 
                $(cont).children().length - 1 : $(cont).data('cycle.opts').nextSlide - 2;
        else
            $(cont).data('cycle.opts').nextSlide = 
                $(cont).data('cycle.opts').nextSlide + 2 >= $(cont).children().length ? 
                0 : $(cont).data('cycle.opts').nextSlide + 2;
        return false;

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

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

(cont).data('cycle.opts').backwards = true;

РЕДАКТИРОВАТЬ: Последний, надеюсь. В файле плагина JS выполните поиск по следующему: 

opts.nextSlide < opts.currSlide

Заменить этот конкретный выбор на: 

opts.currSlide == els.length - 1
...