I have a fancybox of a specified size with iframe content. I want to have a link in the iframe page which will 1) resize the parent fancybox (to a size specified in the link) and 2) load some new content into the iframe.

Here's what i have so far:

JS:

Code:
$("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 FIRST PAGE TO LAUNCH FANCYBOX:

Code:
<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:

Code:
<a href="javascript:parent.jQuery.fancybox.open({href : 'iframecontent2.html', data-width : '600', data-height : '400', data-fancybox-group : 'gallery-1', data-color : '#F9F9F9'});">Change content and resize</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.

Matt