Есть ли простой способ заставить fancybox 2 анимировать слева направо, а не вверх и вниз? - PullRequest
1 голос
/ 20 декабря 2011

У меня есть проект, над которым я работаю и использую fancybox 2 (что довольно здорово).

Тем не менее, раздражает то, что стрелки в галерее указывают влево и вправо, но анимация движется вверх и вниз.Мне бы очень хотелось анимировать новый контент слева, а не сверху.

Прежде чем я разложу свиток по умолчанию для fancybox и начну перезаписывать завершенные и тому подобное, есть ли что-то, чего мне не хватает

Ответы [ 4 ]

1 голос
/ 29 мая 2012

Последний исходный код - https://github.com/fancyapps/fancyBox/zipball/master Включает различные направления анимации в зависимости от способа навигации (с помощью клавиш прокрутки мыши или клавиатуры).

Горизонтальные переходы можно получить с помощью leftи right клавиши со стрелками.

Не нужно взламывать или настраивать собственную версию fancybox.

1 голос
/ 02 февраля 2012

Итак, вот как я это сделал, если кто-то еще столкнется с этим вопросом позже.

пример: Fremont

в файле plugins.js, яЯ сделал свою собственную версию сценария fancybox.changeIn и changeOut обновляются следующим образом:

   if(!isForward){
      // move left (backwards)
      startPos.left = (parseInt(startPos.left, 10) + 1500) + 'px';
      wrap.css(startPos).show().animate({
                opacity: 1,
                left: '-=1500px'
            }, {
                duration: current.nextSpeed,
                complete: F._afterZoomIn
            });
        } else {

    // move right (forwards)
    startPos.left = (parseInt(startPos.left, 10) - 1500) + 'px';
    wrap.css(startPos).show().animate({
                opacity: 1,
                left: '+=1500px'

            }, {
                duration: current.nextSpeed,
                complete: F._afterZoomIn
        });
    }

, а changeOut теперь выглядит следующим образом:

    changeOut: function () {
        var wrap = F.wrap,
            current = F.current,
            cleanUp = function () {
                $(this).trigger('onReset').remove();
            };

        wrap.removeClass('fancybox-opened');

        var leftAmt;

        if(isForward){
            leftAmt = '+=1500px';
        } else {
            leftAmt = '-=1500px';
        }

        if (current.prevEffect === 'elastic') {
            wrap.animate({
                'opacity': 0,
                left: leftAmt
            }, {
                duration: current.prevSpeed,
                complete: cleanUp
            });

        }

isForward определяется в следующей функции / prev

     next: function () {
      if (F.current) {
         F.jumpto(F.current.index + 1);
         isForward = true;
           }
      },

      prev: function () {
      if (F.current) {
         F.jumpto(F.current.index - 1);
         isForward = false;
           }
      },

и это все.наслаждайтесь!

1 голос
/ 28 мая 2012

Хорошая идея. Просто в вашем коде есть ошибка. ты должен поставить

isForward = false; or isForward = true;

до

F.jumpto(F.current.index - 1); or F.jumpto(F.current.index + 1);

в следующей и предыдущей функциях. Так как он нарушает ваш код, когда вы нажимаете «Далее», а затем вы нажимаете пред. Вы можете попробовать это.

next: function () {
        if (F.current) {
            isForward = true;
            F.jumpto(F.current.index + 1);
        }
    },



prev: function () {
            if (F.current) {
                isForward = false;
                F.jumpto(F.current.index - 1);
            }
        },
0 голосов
/ 20 декабря 2011

Проверьте API, может есть вариант для него?

Если нет, найдите часть кода, которая выполняет анимацию, и замените ее своей собственной.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...