有什麼簡單的方法可以讓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); 
      } 
     },