2017-02-28 17 views
1

fancyBox 3で使用するトランジションを指定することはできますか?私はに興味が3つの遷移があります。fancyBox 3のトランジション

  1. オープンスライド/ギャラリー
  2. 移動スライド
  3. デフォルトで閉じるスライド/ギャラリー

間は、fancyBox 3は、種類ごとに異なるトランジションを使用していますコンテンツのナビゲーションの移行を含め、行動でそれを表示するには、こので

<a href="img.jpg" data-fancybox><img src="thumb.jpg"></a> <!--This will zoom in--> 
<a data-fancybox href="#html-content">Open</a> <!--This will fade in--> 
<div id="html-content" style="display: none;"> 
    <p>This content does just fades in.</p> 
</div> 

ルック。画像については、我々は持っている:水平

  • スライドで

    1. ズーム
    2. ズームアウト我々が持っているHTMLコンテンツの

    :水平

  • スライドで

    1. フェード
    2. フェードアウト

    fancyBox 3ではこのデフォルトの動作を変更できますか?たとえば、画像もフェードインまたはフェードインさせるには?私はdocumentationでこれに関する情報を見つけることができませんでした。

  • +0

    現在、トランジションをカスタマイズするオプションはありません。 Btw、あなたが探しているものは何ですか?あなたは現在のシナリオについて説明しましたが、正確に何を望んでいるのかは言いませんでした。 – Janis

    +0

    ありがとう、ジャニス。私はズームの代わりに画像をフェードイン/フェードアウトさせることに最も関心があります。使用するカスタムトランジション関数を指定する可能性に加えて、いくつかのビルトイントランジションを組み合わせて選択することが最適です。 –

    +0

    申し訳ありませんが、次のリリースが待っています(あなたもTwitterでプロジェクトに従うことができます)。 – Janis

    答えて

    1

    fancyBoxバージョン3.1.20以降、これはオプションanimationEffecttransitionEffectで可能です。文書hereがあります。

    0

    もし私がこの権利を得ているのかどうかわかりませんが、&の画像を(各トランジションの間に)消したい場合は、少しのCSSを使ってトリックしてjquery.fancyboxに追加してください.css:

    .fancybox-slide.fancybox-slide--image { 
    opacity: 0; 
    -moz-transition: all 0.01s ease; 
    -o-transition: all 0.01s ease; 
    -webkit-transition: all 0.01s ease; 
    transition: all 0.01s ease;} 
    
    .fancybox-slide.fancybox-slide--image.fancybox-slide--complete { 
    opacity: 1!important; 
    -moz-transition: all 0.25s ease; 
    -o-transition: all 0.25s ease; 
    -webkit-transition: all 0.25s ease; 
    transition: all 0.25s ease;} 
    

    ともlibにjquery.fancybox.jsの速度を変更します。

    // Animation duration in ms 
    speed : 100 
    

    免責事項:私は死ぬべきだとこれがneatest解決策ではなく、働いていました私のために(: