Плагин jQuery Cycle - пауза/возобновление странного поведения

У меня есть слайд-шоу, работающее с потрясающим плагином цикла, и когда вы нажимаете кнопку в шоу, я показываю скрытый слой на странице и отправляю команду «пауза» для цикла. У меня две проблемы:

  1. Когда получена команда паузы, цикл сразу же возвращается к 1-му слайду в последовательности (почему ??) и не выполняет мои обратные вызовы до/после.

  2. После закрытия слоя я отправляю команду «возобновить» для цикла. Слайд-шоу возобновляется (с 1-го слайда, где его оставила пауза), но теперь цикл вообще не вызывает мои обратные вызовы до/после, даже во время слайд-шоу.

Итак, я думаю, мой вопрос: как я могу правильно приостановить/возобновить слайд-шоу, чтобы этого странного поведения не происходило? (И, чтобы быть полностью ясным и избежать путаницы, это не о функции «пауза при наведении», которая на самом деле работает нормально для меня. :-)

Вот моя инициализация цикла () и мои функции обратного вызова. (Вы спросите, почему я вручную отслеживаю nextSlide? Потому что встроенное значение для текущего слайда не обновляется должным образом для обратных вызовов до/после.)

  $(document).ready(function() {
    $('#slideshow').cycle({
      fx: 'fade',        // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        timeout:       4000,  // milliseconds between slide transitions (0 to disable auto advance)
        speed:         1000,  // speed of the transition (any valid fx speed value)
        pause:         1,     // true to enable "pause on hover"
        delay:         0,     // additional delay (in ms) for first transition (hint: can be negative)
        slideExpr:     'img',  // expression for selecting slides (if something other than all children is required)
        before:       moveArrow, // function to call when moving to next slide
        after:       upd, // function to call when moving to next slide
        fastOnEvent:   'fast',
    });
  });

  var nextSlide = 0;

  function upd(a, b, c) {
    nextSlide = nextSlide + 1;        // track which slide we're on
    c = $('#slideshow img').length;
    if(nextSlide > (c - 1)) nextSlide = 0;   // wrap back to 1st
  }

  // move indicator showing which slide we're on
  function moveArrow(a, b, c) {
    $('#slide-indicator').attr('class', 'c'+nextSlide);

    $(".clickmap").hide();          // hide other clickmaps
    $(".clickmap.c"+nextSlide).show();    // show map for this slide

    return true;
  }

Спасибо за любые мысли по этому поводу...

лучший, Эрик


person Eric    schedule 20.07.2010    source источник
comment
У меня тоже эта проблема. Я надеюсь, что у кого-то есть ответ.   -  person damon    schedule 20.07.2010
comment
Я придумал хакерский обходной путь, который может сработать и для вас, но мне нужна помощь, чтобы обходной путь работал правильно. Argh :-) Вы можете увидеть мой вопрос об этом здесь: div">stackoverflow.com/questions/3295185/   -  person Eric    schedule 21.07.2010
comment
Я приближаюсь... Я думаю, что часть проблемы связана с какой-то проблемой с Mac Firefox. Здесь я создал текстовую страницу с очень простым кодом: themepark.com/eric   -  person Eric    schedule 23.07.2010


Ответы (4)


У меня была такая же проблема, пауза и возобновление не работали. Оказалось, что я установил облегченную версию, с полной/полной версией все работает.

person kacee    schedule 13.05.2011

Вы не показали свой код для отправки команды паузы. Что-то определенно не так, потому что пауза НЕ сбрасывает слайд-шоу на первый слайд.

Кроме того, вам не нужно самостоятельно следить за индексом слайдов. Третий аргумент обратных вызовов «до/после» — это объект параметров, который имеет внутреннее состояние слайд-шоу. В этом объекте вы найдете свойства «currSlide» и «slideCount», среди многих других.

person malsup    schedule 21.07.2010
comment
Спасибо за подсказку: currSlide. Я использовал это раньше и получал некоторые странные результаты, но я только что попробовал еще раз, и теперь все в порядке, так что, возможно, я допустил ошибку ранее. Кроме того, я провел еще кучу тестов и частично увидел, что происходит. Когда вызывается цикл('pause'), все элементы в div #slideshow устанавливаются в top: 0; слева: 0; положение: абсолютное; дисплей: нет; opacity: 0, а также сбрасывается z-индекс каждого элемента. (продолжение) - person Eric; 23.07.2010
comment
Это вызывает некоторое поведение, которое я вижу: у меня есть несколько слоев друг над другом для слайд-шоу, так что это объясняет повторное появление первого слайда. Часть того, что происходит, заключается в том, что внутри моего div #slideshow у меня есть другие div (которые не являются частью слайд-шоу, но должны быть там), поэтому, когда я настраиваю цикл(), я говорю ему выбирать только IMG элементы внутри блока #slideshow. Но я думаю, что в «паузе» это игнорируется и просто сбрасывается все там. - person Eric; 23.07.2010
comment
Здесь происходит несколько разных вещей, и эта ветка становится немного сумасшедшей, но FWIW я обнаружил проблему с Mac Firefox, которая, вероятно, помогает объяснить, по крайней мере, некоторые странности. Попробуйте themepark.com/eric из Mac Firefox... - person Eric; 23.07.2010

Я знаю, что это старый вопрос, но у меня была такая же проблема. Способ, которым я обошел это, заключался в том, чтобы просто создать свою собственную функцию для приостановки и возобновления слайд-шоу с событиями наведения JQuery.

Как указал Эрик в нескольких комментариях, связанная с этим проблема заключается в том, что параметр паузы плагина позволяет только навести указатель мыши на элемент IMG, чтобы приостановить слайд-шоу, поэтому, если у вас есть что-либо поверх ваших изображений, например, пейджер или какие-либо декоративные элементы, тогда ты обдолбанный.

Итак, я поместил свои декоративные элементы, баннер (который я назвал «#banner») и пейджер в div с именем «#banner-container», а затем применил этот код, чтобы решить мою проблему:

$('div#banner-container').hover(function(){
   if(!$(this).hasClass('paused')){
       $(this).addClass("paused");
       $('div#banner').cycle("pause")
   }
},function(){
   if($(this).hasClass('paused')){
       $(this).removeClass("paused");
       $('div#banner').cycle("resume")
   }
});
person tmsimont    schedule 20.02.2012

Проблема в версии плагина JQuery Cycle: «облегченная» версия игнорирует команды паузы/возобновления. Использование полной версии может решить проблему.

РЕДАКТИРОВАТЬ: Извините, я ошибся: я пробовал обе версии, но у меня была такая же проблема с полной версией.

person Luca Bordoni    schedule 08.09.2013