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

【问题标题】：is there any easy way to get fancybox 2 to animate left to right instead of up and down?有什么简单的方法可以让fancybox 2 从左到右而不是上下动画？
【发布时间】：2012-05-29 08:08:10
【问题描述】：

我有一个正在使用的项目，我正在使用 fancybox 2（非常棒）。

也就是说，一个烦恼是画廊中的箭头指向左右，但动画会上下移动。我真的很想从左侧而不是顶部为新内容制作动画。

在我拆开fancybox 的默认推出并开始覆盖oncompletes 等之前，我有什么遗漏吗？

【问题讨论】：

标签： javascript jquery fancybox

【解决方案1】：

最新源码-https://github.com/fancyapps/fancyBox/zipball/master 包括不同的动画方向，具体取决于您的导航方式（使用滚动鼠标或键盘导航键）。

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

无需破解或自定义您自己的 fancybox 版本。

【讨论】：

【解决方案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;
           }
      },

就是这样。享受吧！

【讨论】：

【解决方案3】：

好主意。只是，您的代码中有一个错误。你必须把

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

【讨论】：

【解决方案4】：

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

如果没有，请找到执行动画的代码部分并将其替换为您自己的代码。

【讨论】：

...这就是我所做的。我稍后会发布结果，但我在“changeIn”和“changeOut”函数中添加了一些代码，并且还跟踪了您前进的方向。奇迹般有效。可能应该在 std 构建中（我将提交到 github）