Question

我正在开发一个项目并使用fancybox 2（非常棒）。

尽管如此，一个令人烦恼的是画廊中的箭头指向左右，但动画上下移动。我真的很想从左边开始制作新内容，而不是顶部。

在我拆开fancybox的默认部署并开始覆盖oncompletes等之前，有什么我想念的吗？

Answer 1

所以，这就是我如何做到的，如果其他人稍后遇到这个问题的话。

在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 2

好主意。只是，您的代码中存在错误。你必须把

isForward = false; or isForward = true;

前

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

在next和prev函数中。因为当您按下下一步然后按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 3

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

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

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

Answer 4

检查API，可能有一个选项吗？

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

是否有任何简单的方法让fancybox 2从左到右而不是向上和向下动画？

4 个答案: