• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 7024
  • Last Modified:

Centering Fancybox in a parent window from an iframe

Hello, I'm piggybacking off this previously asked question. I wasn't able to find a solution using the incomplete answer provided.

My goal is to open Fancy box centered to the parent window from a link within an iframe. I'd like to keep as little code in the index.html as possible as there are a lot of links contained in my iframe.html.

This is what I have (i've excluded the extraneous code for clarity):

iframe.html
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery.fancybox-1.3.1.js"></script>
<script type="text/javascript">
(function($) {
   $.fn.topFancybox = function(settings) {
       var a = top.document.createElement('a');
       a.style.display = 'none';
       a.class = this.class;
       a.href = this.href;
       top.document.body.appendChild(a);
       $(a).fancybox(settings);
       $(a).click();
   };
})(jQuery);

$(document).ready(function() {
		$("a.group").topFancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	600, 
		'speedOut'	:	200, 
		'overlayShow'	:	false,
		'titleShow'     :   true,
                'titlePosition' :   'outside',
	});
});
</script>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.1.css" media="screen" />
</head>

<body>
  <div><a class="group" rel="group" href="image.jpg"><img src="image_thumb.jpg" alt="image"></a></div>
</body>

Open in new window


parent.html
<head>
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.1.css" media="screen" />
</head>

  <div>
    <iframe src="iframe.html"></iframe>
  </div>

Open in new window


I've only started to work with Javascript/JQuery so my knowledge is limited. Please be clear. Thanks.
0
boringrick
Asked:
boringrick
  • 7
  • 2
1 Solution
 
DesignbyonyxCommented:
Not possible.  Anything inside the iframe cannot be positioned OUTSIDE of the iframe... does that make sense?  see my attachment.  The green box would be fancybox window.  The area outlined in red would not be vissible.

Your best solution is to include fancybox in your index file.  I know you don't want to do this, but it's really the only way you can.  Then you would use window.parent to trigger fancybox.
fancybox-iframe-parent.jpg
0
 
DesignbyonyxCommented:
Oh yeah, the orange box would be the iframe.

Cheers.
0
 
boringrickAuthor Commented:
I should clarify: I don't mind including JQuery code (or a supplementary JavaScript file) in my index.html, but I'd like to keep my list of links contained in the iframe. Based on the previous answered question this is possible, I just wasn't able to figure out what code went where.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
DesignbyonyxCommented:
Things get kind of confusing when you start including the same files everywhere.  This is my best advice in terms of minimizing any duplicate scripts, and achieving what you want in terms of fancybox:

1) Include jQuery and Fancybox in your parent.html, and preferably NOT in the iframe
2) In every page loaded into the iframe, you can do the following (note the SCRIPT block):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">

var $ = parent.jQuery;
var $doc = $(window.document);

$(window).load(function() {
	// In order to access anything on this page, you have to use this syntax
	// where you pass $doc as the second parameter:
	$('#myDiv', $doc).fancybox();
});


</script>
</head>

<body>

Some text in the iframe.

<div id="myDiv">This is my DIV</div>

</body>
</html>

Open in new window

0
 
DesignbyonyxCommented:
My apologies, as my example was a little incomplete and untested.  Try this:

(the first is the parent page, the second is the iframe page)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Parent Page</title>
<link href="jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="jquery.fancybox-1.3.1.pack.js"></script>

</head>
<body>

<iframe src="jquery fancybox iframe-inner iframe.html" style="width:500px; height:400px; margin-left:200px; margin-top: 250px;" scrolling="auto" id="myIframe" />

</body>
</html>

Open in new window

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Iframe Page</title>
<script type="text/javascript">

var $ = parent.jQuery;
var $doc = $(window.document);

// Use this syntax instead of $(function() { ... })
$(window).load(function() {
	// In order to access anything on this page, you have to use this syntax
	// where you pass $doc as the second parameter:
	$('#gallery a', $doc).fancybox();
});


</script>
</head>

<body>

<div>
Some text in the iframe.

<ul id="gallery">
    <li><a href="http://www.treehugger.com/earth-day-action.png"><img src="http://www.treehugger.com/earth-day-action.png" alt="Image 1" style="width:50px;" /></a></li>
</ul>

</div>

</body>
</html>

Open in new window

0
 
DesignbyonyxCommented:
This post really got me intrigued, so I revisited some things.  Here is my final working solution, which is better than my previous comment for several reasons.  But it still has it's short-comings.

http://www.neteffectservices.com/NetEffect/tmp/jquery-iframe-example/index.html
0
 
boringrickAuthor Commented:
Brilliant. I opted for the second solution as I can live without the title or add it to the bottom of a div if I need to. Thanks again!
0
 
DesignbyonyxCommented:
No worries.  Most of the problems come about when jQuery tries to manipulate the DOM of the iframe.  It works in FF, but not IE and Webkit (chrome/safari).  The reason the title doesn't work is because there are 2 phases to fancybox DOM manipulation:

1) When the page loads, fancy box creates all of it's containers and overlays
2) When you click a link to trigger the fancybox popup... fancybox determines whether or not you need a title, and creates the title element accordingly.

So with my solution, here's what happens:
1) jQuery and fancybox load normally
2) fancybox creates all of it's necessary container and overlays (does not include the title)
3) my code modifies jQuery so that all selectors point to the iframe by default
4) fancybox then tries to create a title element (if needed) when the user clicks a link

In step 4, the title element is inserted into the iframe, as opposed to the parent document.  This results in an error in some browsers.  The same principal can be applied to any plugin.  

Here is the rule which determines whether or not this will work for you:
If jQuery tries to manipulate the DOM after the initial page load, then this solution isn't going to work.

Email me if you have any further questions, as there are ways around this if you are writing your own code. ryan [dot] wheale [at] gmail [dot] com.
0
 
MsKrissyCommented:
I know this has been answered from an image perspective, but when I try this with a html or php file instead of a jpeg, it doesn't work.  do you have any idea why?  I am using your parent and iframe pages as testing.

This seems to be the only find close to what I am looking for, so any help would be much loved!
0
 
DesignbyonyxCommented:
This is probably because jquery is attempting to create extra html elements AFTER the initial page load.  In such a case, my solution will not work.  I did not test any different scenarios than the one posted, but my blind guess would be that the example I posted is the ONLY way that can work without writing a lot of code.

Sorry.  I hesitated to even post my solution as it is very very limited.  If there ends up being a lot of interest in this topic, then I may take the time to write the code necessary to allow fancybox to communicate with the contents of an iframe.  Until then, I'm afraid you are out of luck.

Cheers.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 7
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now