How to set the width of a fancybox Iframe

Question

I'm passing a link to an image to a PHP file in order to return said image into a fancybox iFrame based upon the solution here

Unfortunately the width of the iframe dosn't change dependent on content size no matter what size image i pass the width of the iframe remain at around 850px but the height changes.

I even set the image style to stupid values, width: 150px height: 150px, but the iframe width remained at 850px with a thumbnail size image in the top left.

attempted to combine jfk's solution but the ifrme remand the same width.

how do i wright the iframe code so the height & width are set according to the image size?

$(document).on('click', '.Images', function(e) {
e.preventDefault();
var Href = 'GetImg.php?img=' + $(this).attr("href");
$.fancybox.open({
    href: Href,
    type: 'iframe',
    padding: 5
  });
});

​ Thanx Holly

Answer 1

You can set the fancybox width. Do something like this:

$.fancybox.open({
    href: Href,
    width: 500,
    type: 'iframe',
    padding: 5
  });
});

Answer 2

have you try to give the width and height parameters ?

http://fancybox.net/api

Answer 3

Because you are using an iframe, you have a child window nested in a parent window. Javascript security prevents the parent window from directly accessing the document object model of the child window when they are separated by an iframe barrier. The quick solution is to change your fancybox attributes so the popup window is treated as an inline div instead of an iframed window. Fancybox can then automatically query the inline window for its height and width properties and automatically resize.

But if you need to implement your popup through an iframe, then you will want to treat the separate windows as if they are from different domains. In the child window, you set up a postMessage() that will operate similar to an api call that posts information to another server. In the parent window, you set up a listener that will respond to the request and act on the values it receives. The HTML5 specification for the postMessage() will let the two windows communicate this way. You can put the postMessage() request in the $(document).ready() function stack for the child window, and the listener in the onComplete() function stack of the fancybox call.

http://viget.com/extend/using-javascript-postmessage-to-talk-to-iframes