有什么简单的方法可以让fancybox 2左右移动而不是上下移动？

Question

我有一个项目，我正在使用fancybox 2（这是相当不错的）。

也就是说，一个令人讨厌的是画廊中的箭头指向左侧和右侧，但动画会上下移动。我真的很喜欢从左侧而不是顶端为新内容制作动画。

在我拆开fancybox的默认卷展栏并开始覆盖oncompletes等，有什么我失踪了？

Answer 1

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

使用left和right键箭头可以获得水平转换。

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

Answer 2

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

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

Answer 3

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

例如：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: 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 4

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

isForward = false; or isForward = true; 

前

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

两个next和prev功能。因为当你按下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); 
      } 
     },