FancyBox iframe returns parent.$ as undefined (using WordPress)

Question

I'm trying to close FancyBox from within the iframe, but parent.$ is always undefined. This is my iframe JavaScript:

 <script type='text/javascript' 
  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'>
 </script>
 <script type="text/javascript">
 jQuery(document).ready(function($){
     (function($) {
         $.fn.closeFancyBox = function() {
             $(this).click(function() {
                 parent.$.fancybox.close();
             });
         };
      })(jQuery);
      $('#cancel').closeFancyBox();
      });
 });
 </script>

Replacing parent.$.fancybox.close(); with alert('clicked'); works just fine. I don't understand why parent.$ is undefined when the iframe is in the same domain.

I'm using WordPress 2.9.1, with the FancyBox for Wordpress plugin.

• main page: //server.local/web/test/index.php
• iframe page: //server.local/web/test/wp-content/plugins/wp-test/test.htm

The first of these urls is the main page, the second is the iframe page; server.local is my home test server.

Any ideas? I can pastebin the entire source if it would be helpful.

Answer 1

It is undefined because WordPress runs jQuery in noConflict mode. Use this instead:

parent.jQuery.fancybox.close();

noConflict mode means $ does not equal jQuery. You have to explicitly use jQuery to access what you normally can access with $.

Answer 2

My answer is not related to wordpress, but one for fancybox in general.

in the iframe, if you have included the main jquery script(jquery-1.5.2.min.js), then it will conflict with the one on the main page, and parent.$.fancybox will not work in this case.

other jquery related stuff (like for eg: the tabs) will work inside the iframe. hence, it wont occur to a novice programmer that the second jquery script inside the iframe is the villain.