花哨的盒子在 beforeShow 函数中与 iframe 一起使用？

Posted 2023-05-09

【中文标题】花哨的盒子在 beforeShow 函数中与 iframe 一起使用？

【英文标题】：fancy box work with iframes in beforeShow function?

【发布时间】：2012-06-01 21:44:38

【问题描述】：

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

$('.fancybox').fancybox( openEffect : '弹性', closeEffect : '弹性', 自动尺寸：真， 演出后：函数（） 变种花哨=这个； var h = $('.fancybox-iframe').contents().find('html').height(); var w = $('.fancybox-iframe').contents().find('html').width(); 花式.宽度 = w; 花式.高度 = (h+50); );

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

【参考方案1】：

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

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

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

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

$(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

见DEMO here

【讨论】：

谢谢，非常清晰和全面的答案。完美运行，非常感谢它