ファンシーボックス2に上下の代わりに左から右に動かす簡単な方法はありますか？

Question

私はファンシーボックス2（これはかなり優れています）を使って作業しているプロジェクトがあります。

これは、ギャラリーの矢印が左右を指していますが、アニメーションが上下に動くということです。私は本当に新しいコンテンツをアニメーション化するのが大好きです。

私はfancyboxのデフォルトロールアウトを外してoncompletesなどの上書きを開始する前に、欠けているものがありますか？

Answer 1

最新のソースコード - https://github.com/fancyapps/fancyBox/zipball/master は、あなたが（スクロールマウスまたはキーボードのナビゲーションキーを使用して）移動方法に応じて、異なるアニメーション方向が含まれています。

leftとrightのキー矢印を使用して、水平方向のトランジションを得ることができます。

独自のファンシーボックスのバージョンをハックしたりカスタマイズしたりする必要はありません。

Answer 2

APIを確認してください。多分オプションがありますか？

そうでない場合は、アニメーションを実行するコードの部分を見つけ、自分で置き換えます。

Answer 3

だから、誰か他の人がこの質問に後で従うなら、私はそれをやったのです。

例：plugins.jsファイル内The Fremont

、私はfancyboxスクリプトの私自身のバージョンを作りました。

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

と取換えは次のようになります：changeInと取換えはそうのように更新され

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

良いアイデア。ちょうどあなたのコードにバグがあります。あなたは両方の次と前の機能に

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

前

isForward = false; or isForward = true; 

を置く必要があります。あなたが次を押してから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); 
      } 
     },