How to make a lightbox 'breakout' of an iframe? - 【StackMirror】|jquery|iframe|overlay|lightbox|jquery-tools

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

2012-04-04 05:35
by aethergy

You probably have to use 'modal' overlays, check demo here - http://jquerytools.org/demos/overlay/modal-dialog.html . I would recommend you to use jQuery UI or Fancybox plugin because they are easier to use and modal dialogs can be enabled right from option sent in javascript/jquery call itself. No need of bothering much about CSS as you see in the link I gave - Harshith J.V. 2012-04-04 05:52

Thank you for your suggestions. I will look into Fancybox. Fingers crossed.. - aethergy 2012-04-04 06:06

Try jQuery UI, to get mutiple widgets in a single package like tabs, dialogs, autocomplete, calendar,etc along with different effects like animate, drag&drop, etc. If you only want overlay pop-ups then Fancybox is very good - Harshith J.V. 2012-04-04 06:21

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>

2012-04-04 05:44
by JFK

Thanks JFK, this is exactly what I want to do. I've never used Fancybox, but I'll check it out and report back - aethergy 2012-04-04 06:05

Would you mind taking a look at the code on the standalone page? One that page the video opens up in the whole window and on the site's homepage the video fills the iframe...not sure what's going on but I'm somewhat new to using jquery. Thanks for the help - aethergy 2012-04-04 06:58

UPDATE: Now I've got the lightbox popping up on the standalone page, but the iframe isn't doing anything when clicked on the site's homepage. Any idea why that would be? I have the fancybox js and css loading on both pages - aethergy 2012-04-04 07:10

have you loaded both jQuery and fancybox on the home page too? ... if not, you shoul - JFK 2012-04-04 07:24

Yes, they are all loaded - aethergy 2012-04-04 07:35

I copied your standalone page locally and works perfectly fine from ifram - JFK 2012-04-04 07:42

On a second look at your standalone page, it's missing the html, head and body tag - JFK 2012-04-04 07:45

Sent an email to the addres - aethergy 2012-04-04 07:53

your error means that fancybox js or jQuery are not properly loaded in the home page (or in the right order) or there is another js error that breaks the cod - JFK 2012-04-04 07:53

I'll have a loo - JFK 2012-04-04 07:53

OK, you have another javascript library (mootools) so you have to do two thing with jQuery code (1) Use jQuery.noConflict() http://api.jquery.com/jQuery.noConflict/ and (2) within your jQuery code, convert all $ 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

Great, I'll try it out and report back. Thank you. How do I use the jQuery.noConflict() aethergy 2012-04-04 08:05

see my edited answe - JFK 2012-04-04 08:14

It appears to be working now with just swapping out $ for jQuery! Oh man, you've been a lifesaver. Thanks - aethergy 2012-04-04 08:18

+1 for discovering the OP dual library conflict - HPWD 2012-11-06 16:26

will it work for cross domain - Pratyush Dhanuka 2018-07-19 10:56