4

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

aethergy
  • 723
  • 2
  • 7
  • 16
  • 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. Apr 04 '12 at 05:52
  • Thank you for your suggestions. I will look into Fancybox. Fingers crossed... – aethergy Apr 04 '12 at 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. Apr 04 '12 at 06:21

1 Answers1

3

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>
JFK
  • 40,963
  • 31
  • 133
  • 306
  • 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 Apr 04 '12 at 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 Apr 04 '12 at 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 Apr 04 '12 at 07:10
  • have you loaded both jQuery and fancybox on the home page too? ... if not, you should – JFK Apr 04 '12 at 07:24
  • I copied your standalone page locally and works perfectly fine from iframe – JFK Apr 04 '12 at 07:42
  • On a second look at your standalone page, it's missing the `html`, `head` and `body` tags – JFK Apr 04 '12 at 07:45
  • 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 code – JFK Apr 04 '12 at 07:53
  • 1
    OK, you have another javascript library (mootools) so you have to do two thing with jQuery code (1) Use 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 Apr 04 '12 at 08:04
  • Great, I'll try it out and report back. Thank you. How do I use the jQuery.noConflict() – aethergy Apr 04 '12 at 08:05
  • It appears to be working now with just swapping out $ for jQuery! Oh man, you've been a lifesaver. Thanks! – aethergy Apr 04 '12 at 08:18