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.
