花哨的盒子在beforeShow函数中使用iframe？ [英] fancy box work with iframes in beforeShow function?

问题描述

我试图根据存储在iframe正在加载的iframe内的标签中的信息来动态设置我的Fancybox对象的某些值。问题是，我唯一能够从内容中获取CORRECT值（iv几乎可以尝试每个回调组合）都在afterShow方法上。这会导致宽度和高度的跳跃过渡，在显示后会重置。

Im trying to dynamically set some values of my Fancybox object based on information stored in tags inside of an iframe which fancy box is loading. the problem is, the only time i can seem to get the CORRECT values out of the content (iv tried virtually every callback combo possible) is on the afterShow method. this causes a jumpy transition of the width and height which are reset after it is shown.

$('.fancybox').fancybox({
            openEffect : 'elastic',
            closeEffect : 'elastic',
            autoSize:true,
            afterShow : function() {
                    var fancy = this;
                    var h = $('.fancybox-iframe').contents().find('html').height();
                    var w = $('.fancybox-iframe').contents().find('html').width();
                    fancy.width = w;
                    fancy.height = (h+50);
            }
        });

在AfterShow方法之外的任何内容都没有给我正确的结果，甚至在Show之前（这就是我想要的）。是否有任何回调/ jquery组合可以在显示花式框之前实现这一点？谢谢！

nothing outside of the afterShow method gives me correct results, even beforeShow(which is what I am going for). Is there any callback/jquery combo that can achieve this before showing the fancy box? Thanks!

推荐答案

你也可以使用 beforeShow 回调选项，但是您可能需要取消所有转换（将 nextSpeed 和 prevSpeed 设置为 0 ）。

You could also use the beforeShow callback option, but you may need to cancel all the transitions (set nextSpeed and prevSpeed to 0).

转换速度似乎是使用 afterShow 回调创建跳跃效果，或者避免使用正确的值来获取正确的值 beforeShow 回调。

The transition speed seems to be creating the jumping effect using the afterShow callback or avoiding to get the correct value using the beforeShow callback.

您可能还需要更新到fancybox版本v2.0.6。

You may also need to update to fancybox version v2.0.6.

此外，您还可以在不使用外部变量的情况下简化脚本：

Additionally, you could also simplify your script without using external variables like:

$(document).ready(function() {
 $("a.fancybox").fancybox({
  openEffect : 'elastic',
  closeEffect : 'elastic',
  fitToView: false,
  nextSpeed: 0, //important
  prevSpeed: 0, //important
  beforeShow: function(){
  // added 50px to avoid scrollbars inside fancybox
   this.width = ($('.fancybox-iframe').contents().find('html').width())+50;
   this.height = ($('.fancybox-iframe').contents().find('html').height())+50;
  }
 }); // fancybox
}); // ready

参见此处的演示

这篇关于花哨的盒子在beforeShow函数中使用iframe？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！