我有一个带有 iframe 内容的指定大小的花式框。我希望能够从 iframe 中的链接更改内容,并将fancybox 的大小调整为新的指定大小以适应新内容。似乎有一些类似的线程,但我没有运气尝试这些建议,我想是因为我使用的是fancyapps,所以代码略有不同。
这是我所拥有的:
JS:
$("a.fancybox").fancybox({
fitToView: false,
beforeShow: function() {
this.skin.css("background", $(this.element).data('color') || 'F9F9F9');
},
afterLoad: function(){
this.width = $(this.element).data("width");
this.height = $(this.element).data("height");
}
});
页面中的链接以启动 FANCYBOX:
<a class="fancybox fancybox.iframe" data-color="#F9F9F9" data-width="225" data-height="404" href="iframe1.html" data-fancybox-group="gallery-1">
IFRAME 1 中的链接以更改内容和调整 FANCYBOX 的大小:
<a href="javascript:parent.jQuery.fancybox.open({href : 'iframe2.html', data-width : '600', data-height : '400', data-fancybox-group : 'gallery-1', data-color : '#F9F9F9'});">Change content</a>
目前第一个 iframe 已加载且大小正确,但更改内容链接不起作用。
任何人都可以提供的任何帮助或提示都会很棒。提前致谢。