在 beforeShow 函数中使用 iframe 的花式框? [英] fancy box work with iframes in beforeShow function?

问题描述

我试图根据存储在 iframe 内的标签中的信息动态设置我的 Fancybox 对象的一些值，该 iframe 正在加载花式框.问题是，我似乎可以从内容中获取正确值的唯一时间(iv 尝试了几乎所有可能的回调组合)是在 afterShow 方法上.这会导致宽度和高度的跳跃过渡，在显示后重置.

<前>$('.fancybox').fancybox({openEffect : '弹性',closeEffect : '弹性',自动大小:真，后显示:函数(){var 花式 = 这个；var h = $('.fancybox-iframe').contents().find('html').height();var w = $('.fancybox-iframe').contents().find('html').width();花式宽度 = w;花式.高度 = (h+50);}});

afterShow 方法之外的任何东西都不能给我正确的结果，即使是 beforeShow(这就是我想要的).在显示花哨的框之前，是否有任何回调/jquery 组合可以实现这一点?谢谢！

解决方案

您也可以使用 beforeShow 回调选项，但您可能需要取消所有过渡(设置 nextSpeed 和 prevSpeed 到 0).

过渡速度似乎是使用 afterShow 回调创建跳跃效果或避免使用 beforeShow 回调获取正确值.

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

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

$(document).ready(function() {$("a.fancybox").fancybox({openEffect : '弹性',closeEffect : '弹性',fitToView: 假,nextSpeed: 0,//重要prevSpeed: 0,//重要beforeShow:函数(){//添加 50px 以避免在fancybox 内出现滚动条this.width = ($('.fancybox-iframe').contents().find('html').width())+50;this.height = ($('.fancybox-iframe').contents().find('html').height())+50;}});//花式盒子});//准备好

请参阅此处的演示

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

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!

解决方案

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

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.

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

See DEMO here

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