asked on

Getting Fancybox Overlay Centered to Parent Window from iFrame

I have an iframe being loaded in a fixed height div lower in my page that has some content being presented in overlays using fancybox overlay. I also have a dimming feature enabled. Right now only the container div for the frame dims obviously, and the overlay centers to that div, not the window. How do i send the overlay to the fill/center in the parent page? parent.document someother? Script noob, sorry.

my overlay function...

$(document).ready(function() {
	
	$("a.videoup").fancybox({
		'hideOnContentClick': false,
		'frameWidth': 640,
		'frameHeight': 380,
		'centerOnScroll': true,
		'overlayOpacity': .75
	});
	
	$("a.iframe").fancybox({
		'hideOnContentClick': false,
		'frameWidth': 950,
		'frameHeight': 500,
		'centerOnScroll': true,
		'overlayOpacity': .75
	});
 
});

Open in new window

ASKER CERTIFIED SOLUTION

Zyloch

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

aiwazz

ASKER

Thank you!!! It works with some effort I got it dialed! Really appreciate that!

bigsilk

Re: getting Fancybox to work in an iframe to cover the the entire screen (over the parent window): If aiwazz is a newbie, I'm prenatal...

First I assume that, in the doc head, script tags need to go around the code, yes?

If I have done what needed doing correctly, I get no love: The html page still ends up in the iframe only, not covering the parent page.

I feel scared and alone on this...

inrgb

Yeah... this solution didn't work for me either...

If anyone's still interested, I did find a different approach that worked.

I hid a link on the main page (parent page) and included the normal fancybox code along with jquery up in the head on this page.

Then, on the iframe (child page) I included a different link and created a click event for this link which triggers the click event on the parent page's hidden link:

$('a#fancyBoxLinkInIframe').click(function() {parent.$('#hiddenFancyBoxLinkOnParentPage').trigger('click');});

Not the most elegant, but a simple way to do it...

boringrick

Is it possible to get some clarification on this answer? I find it incomplete. I've followed what I could and my Fancybox now pops up on page load with no content and still contained in the iframe. I don't want to ask a related question since this is exactly my question.