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

score 1 · Answer 1 · answered Aug 24 '12 at 17:15

1

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

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

answered Aug 24 '12 at 17:15

kannix

5,107
6
28
47

No i haven't I was hopping the content of the iframe ie an image would determine the width / height rather than a fixed value, However i'll give it ago just to prove it can be altered. Thanx – Holly Aug 25 '12 at 09:57
Hi Not got very with this added 'code'width: 1200, height: 800, didn't make any differance. so took the php file out of the href and just pass the image url now i have a small image. and according to Firebug inspect element i get this
Please Help.
– Holly Aug 27 '12 at 17:59
Please take a look at this example http://jsfiddle.net/2XhjG/ if you change width and height to an value like 100px it works like a charm. There is a new version of fancybox which can be found here: http://fancyapps.com/fancybox/ do you use that? Maybe you can post a own jsFiddle with the non working code? – kannix Aug 27 '12 at 18:44

score 0 · Answer 2 · answered Aug 24 '12 at 17:15

0

have you try to give the width and height parameters ?

http://fancybox.net/api

answered Aug 24 '12 at 17:15

fliim

2,059
4
18
31

hanmari · Answer 3 · 2013-01-08T22:02:42.017

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

How to set the width of a fancybox Iframe

3 Answers3