1

JS と CSS に関しては少し初心者で、数日間私の問題を解決しようとしてきました。誰かが私を助けてくれることを願っています...

Fancybox 2.0.5 から 2.1.0 にアップデートしました。iframe を開いて Vimeo のビデオを表示すると、フェードイン (speedIn が 1000) に設定されているオーバーレイが、フェードインではなく 100% で表示されます。iframe の読み込みが完了する直前に、オーバーレイが短時間点滅します。オフとオンを繰り返します。ヘルパーを通じて、スピードアウト、不透明度、色を制御できますが、オーバーレイのスピードインは制御できません。

Mac の Safari (v5.1.2) と Firefox (v12) で試しましたが、どちらも同じ問題を抱えています。ここに私が取り組んでいるウェブサイトへのリンクがあります。(画像をクリック):

http://www.steinstie.com/Test/index.html

どんなアイデアでも大歓迎です！

ヘルパーのコードは次のとおりです。

$(document).ready(function() {
        $(".fancybox-iframe").fancybox({
            openEffect  : 'fade',
            closeEffect : 'fade',
            openSpeed   : 1000,
            closeSpeed  : 1000,
            padding     : 0,
            width       : 600,
            height      : 360,
            type        : 'iframe',
            autoSize    : false,
            fitToView   : false,
            // NICK H
            afterLoad: function(){
                  this.title = $(this.element).next('.newTitle').html();
            },
            // END NICK H
            helpers: {
            overlay: {
                    speedIn: 1000, //<-- here you control the overlay speedIn
                    speedOut: 1000,//<-- here you control the overlay speedOut
                    css: {'background' : 'rgba(0, 0, 0, 0.6)'}
                    }, // overlay

                title : {
                    type : 'inside'
                }

                    } // helpers
        });
    });
4

2 に答える 2

1

残念ながら、 /に対応するbeforeOpen/afterOpenのコールバックはないようですが( http://fancyapps.com/fancybox/のドキュメントを参照)、オーバーレイ作成関数を複製し、オーバーレイが作成された後にカスタム フェードインを追加できます。beforeCloseafterClose

// Alter fancyBox functions.
(function ($, F) {

  // Clone of original overlay creation function, but with overlay fade in animation.
  F.helpers.overlay.create = function(opts) {
    var parent;

    opts = $.extend({}, this.defaults, opts);

    if (this.overlay) {
      this.close();
    }

    parent = F.coming ? F.coming.parent : opts.parent;

    this.overlay = $('<div class="fancybox-overlay"></div>').appendTo( parent && parent.lenth ? parent : 'body' );
    this.fixed   = false;

    if (opts.fixed && F.defaults.fixed) {
      this.overlay.addClass('fancybox-overlay-fixed');

      this.fixed = true;
    }

    // Custom fade in.
    this.overlay.stop(true).hide().fadeIn();
  }

}(jQuery, jQuery.fancybox));

これは、ロック解除モードでオーバーレイを使用する場合に最適に機能することに注意してください。ロック モード (非タッチ デバイスのデフォルト) を使用すると、.fancybox-wrap要素はオーバーレイ要素内に配置され、これにより (アニメーション設定に応じて) 二重のフェード アニメーションが発生する可能性があります: オーバーレイと要素をラップする子で。

于 2014-04-03T08:52:39.037 に答える
0

カスタムスクリプトは問題ないように見えます...以前に答えたので、これらを試してください：

  1. fancybox の 1 つのインスタンスをロードします ....通常バージョンとパックバージョンのどちらか一方のみが必要な場合 (両方ではない) をロードしています。

  2. メディア、サム、ボタン ヘルパー js ファイルの前に fancybox js ファイルをロードします。そうしないと、次の js エラーが発生します。

    Timestamp: 12/09/2012 10:25:58 AM
Error: TypeError: F is undefined
Source File: http://www.steinstie.com/Test/source/helpers/jquery.fancybox-buttons.js
Line: 25

と

Timestamp: 12/09/2012 10:25:58 AM
Error: TypeError: F is undefined
Source File: http://www.steinstie.com/Test/source/helpers/jquery.fancybox-thumbs.js
Line: 28

と

Timestamp: 12/09/2012 10:25:58 AM
Error: TypeError: F is undefined
Source File: http://www.steinstie.com/Test/source/helpers/jquery.fancybox-media.js
Line: 87

これらのエラーにより、fancybox のコードが壊れる可能性があります。

編集: Fancybox 2.1 に関しては、オーバーレイのspeedInオプションが削除されたようです。オーバーレイの固定位置が導入されました (この新しいエステートがspeedInオプションと競合していた可能性があります) 。

投稿されたスクリプト ( overlay speedIn) は fancybox 2.0.6 以下で動作します。

于 2012-09-12T17:42:48.233 に答える