有没有什么简单的方法可以让fancybox 2的动画从左到右而不是从上到下?

Question

我有一个项目，我正在工作和使用fanybox 2(这是相当伟大的)。

也就是说，一个烦恼是图库中的箭头指向左边和右边，但动画上下移动。我真的很想把新内容从左边动画化，而不是从上面。

在我拉开fancybox的默认rollout并开始覆盖oncompletion等之前，我错过了什么吗?

Answer 1

最新源代码- https://github.com/fancyapps/fancyBox/zipball/master包括不同的动画方向取决于你的导航方式(使用滚动鼠标或键盘导航键)。

您可以使用left和right键箭头获得水平过渡。

无需修改或自定义自己的fanybox版本

Answer 2

我是这样做的，如果以后有人遇到这个问题的话。

示例:The 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在next/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;
           }
      },

就是这样。享受吧!

Answer 3

好主意。只是，你的代码有个bug。你必须把

isForward = false; or isForward = true;

之前

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

在next和prev函数中。因为它会破坏你的代码，当你按下下一步，然后再按上一步。你可以试试。

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);
            }
        },

Answer 4

检查API，也许有一个选项?

如果没有，找到执行动画的那部分代码并用你自己的代码替换。