I have an iframe on the front page of a site. The iframe loads a .php page which has a rotator built with jQuery Tools Tabs. On the first tab, I use jQuery Tools Overlay to popup a YouTube video in a lightbox.
This is all working fine on the stand-alone page, however when viewed on the site's front page the lightbox is confined to the iframe.
I need the lightbox to popup/breakout of the iframe and takeover the entire site's front page.
Is there a way to fetch the iframe's parent window or the top window and then make the lightbox open there?
Or is there another method all together with which I could accomplish this?
The site is locked down for development, but you can view the stand-alone php page here: Stand-Alone Page
Any "lightbox" preference?
If you are flexible, you could use Fancybox (v2.x) and achieve that effect like in this demo: http://picssel.com/playground/jquery/fancyboxFromIframe_16Jan12.html
In that page there are two iframes: the one on the left shows your current scenario while the one on the right the solution you are looking for.
UPDATE: use of jQuery.noConflict()
<script type="text/javascript" src="other_lib.js"></script> (mootools)
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
html
, head
and body
tag - JFK 2012-04-04 07:45
$
into jQuery
so instead of doing $(document).ready()
do jQuery(document).ready()
and instead of doing parent.$.fancybox
do parent.jQuery.fancybox
etc, inside your standalone page - JFK 2012-04-04 08:04