Слайд-шоу в галерее изображений FancyBox?

Question

Я только начинаю изучать HTML и javascript (читай: я почти ничего не знаю об этом) и хотел бы, чтобы моя страница index.html открыла вращающуюся галерею изображений, используя FancyBox .

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

Опять же, чем проще ответ, тем лучше - потому что я не знаю приседания.

Я смиряюсь перед волшебниками нашего времени ...

Answer 1

Вы можете добавить это в конец вашего JavaScript:

setInterval($.fancybox.next, 10000);

Число представляет время ожидания в миллисекундах (так что в моем примере это 10 секунд).Кроме того, убедитесь, что в настройках fancybox укажите cyclic = true, иначе он остановится на последнем изображении.(если это не то, что вам нужно)

edit : чтобы добавить паузу, вы можете сделать что-то вроде следующего:

Вместо этой одной строки в вашем javascript, добавьте это:

var rotatingInterval = FALSE;
function toggleRotating(fromButton) {
  if (rotatingInterval) {
    clearInterval(rotatingInterval);
    rotatingInterval = FALSE;
  } else {
    rotatingInterval = setInterval($.fancybox.next, 10000);
    if (fromButton)
      $.fancybox.next();
  }
}
toggleRotating(FALSE);

И тогда у вас может быть кнопка в html, например:

<input type="button" value="Pause" onclick="toggleRotating(TRUE);" />

, которая будет воспроизводить / приостанавливать.

Answer 2

Чтобы превратить ваш fancybox в слайд-шоу после его открытия без дополнительных кнопок, используйте параметр «onComplete», чтобы установить таймер для вызова «next ()».Например:

jQuery("a.fancybox").fancybox({
    "onComplete":function() {
        clearTimeout(jQuery.fancybox.slider);
        jQuery.fancybox.slider=setTimeout("jQuery.fancybox.next()",5000);
    }
});

Answer 3

Вот как я настроил функцию. Я добавил счетчик, потому что при загрузке галереи вызовы onStart / onComplete будут срабатывать каждый раз при загрузке нового изображения. Я только хочу, чтобы первый вызов связывал setInterval со следующим вызовом.

  function toggleRotating(fromButton) {
      count = count + 1;
      if (fromButton == false) {
        clearInterval(rotatingInterval);
        rotatingInterval = false;
        count = 0;
      } else {
        if(count == 1)
            rotatingInterval = setInterval($.fancybox.next, 10000);

      }
   }

А вот мои глобальные переменные и способ запуска fancybox.

var rotatingInterval = false;
var count = 0;
$(function () {
    $("a.slide").attr('rel', 'presentation1').fancybox({'autoDimensions':false,'height':540,'width':720,'autoScale':false,'cyclic':true, 'onStart': function(){ toggleRotating(true); } });
});

Я не создал кнопку, чтобы остановить вращение. Я думаю, что я сделаю это так, если вы нажмете на кнопку «Далее» или «Предыдущий», он переключится в «Ложь».