1

在谈到 JS 和 CSS 时有点新手，并且已经尝试解决我的问题几天了，希望有人可以帮助我......

我刚刚从 Fancybox 2.0.5 更新到 2.1.0。当 iframe 打开以显示来自 Vimeo 的视频时，设置为淡入（speedIn 为 1000）的叠加层以 100% 进入而不是淡入。就在 iframe 完成加载之前，叠加层会短暂闪烁关闭并再次打开。通过助手，我可以控制 speedOut、不透明度和颜色，但不能控制叠加层的 speedIn。

我已经在我的 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对应的回调beforeClose（afterClose参见http://fancyapps.com/fancybox/上的文档），但我们可以克隆覆盖创建函数并在创建覆盖后添加自定义淡入：

// 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的单个实例......当您只需要其中一个（但不是两者）时，您现在正在加载普通版本和打包版本。

  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 回答