How to resize Fancybox using ajax

Question

I can't resize my fancybox, when I use ajax... This is how my code looks like:

$(".button").click(function() {
   var formData = $(this).closest('form').serializeArray();
   formData.push({ name: this.name, value: this.value });
      $.ajax({
          type        : "POST",
          cache       : false,
          url         : "<?php echo plugins_url(); ?>/kryssord-opplaster/opplasting/utfoerOppgave.php",
          data        : formData,
          success     : function(data) {
                           $.fancybox(data);
                        }
       });
     return false;
});

how do I resize the $.fancybox(data);? I tried ".....$.fancybox(data, {'width': '50%', 'height': '75%'})..."

but that didn't work at all.. Thanks in advance!

Update:

Seems like I only had some errors in my HTML-code.. I had set <table><form></form></table> instead of <form><table></table></form>..

And somehow the way I've coded it now, if I set a stylesheet in the php-file (the url) it affects the page in the background as well.. So the best thing would be if I could get the ajax-page inside a iframe. However if I edit the fancybox-script to ..$.fancybox(data, {'type': 'iframe'}); i get a 403 error..

could someone help me modify the above code?

Answer 1

Try this, add this into html source <div id="successContainer"></div>

$("#successContainer").html(data);
$("#successContainer").fancybox({'width': '50%', 'height': '75%'});

Answer 2

Are you trying to resize it to a certain height and width, or just have it automatically resize to fit the content?

Try throwing this into the ajax success portion:

$.fancybox.resize();

Or try:

$.fancybox({'width': '50%', 'height': '75%'});

As for the update, I'm a little unclear of what you're trying to do, could you clarify? Why do you need the iframe?