Resize fancybox from link in iframe

Question

I have a fancybox of a specified size with iframe content. I would like to be able to change the content from a link within the iframe, and resize the fancybox to a new specified size to accommodate the new content. There appear to be a few similar threads about this but i havnt had any luck trying the suggestions on those, i think because i am using fancyapps so the code is slightly different.

Here's what i have:

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

LINK IN PAGE TO LAUNCH FANCYBOX:

<a class="fancybox fancybox.iframe" data-color="#F9F9F9" data-width="225" data-height="404" href="iframe1.html" data-fancybox-group="gallery-1"> 

LINK IN IFRAME 1 TO CHANGE CONTENT AND RESIZE 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>

At the moment the first iframe loads and is correctly sized, but the change content link doesn't work.

Any help or tips anyone can offer would be great. Thanks in advance.

Answer 1

我注意到您传递了诸如data-width : '600'但它们应为width : '600'