Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

call Fancybox in parent from iframe

I have 2 pages, my index.html and social.html. I cleaned out my index and left only the jquery code need for fancybox What I am trying to do is to have images inside social.html and when clicked on it, it would open fancybox and show it but in index.html not inside the iframe. The error that comes up is:

Uncaught TypeError: Property 'showImage' of object [object DOMWindow] is not a function
(anonymous function)social.html:103
  onclick 

this is my index.html:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript" src="js/video.js"></script>
<script type="text/javascript">
        function showImage(image) {
            $.fancybox('<img src="img/' + image + '" alt="" border="0" />');
        };
</script>

</head>

<body>
<iframe src="social.html" scrolling="no" border="0" width="579" height="505" allowtransparency="true"></iframe>
</body>
</html>

in IFrame page:

 <img src="img/picture1.jpg" alt="" class="thumbs" onclick="parent.showImage('picture1.jpg');"/>

PS: both pages are on same domain... EDIT: video.js -> this is from fancybox I didn't make this.

jQuery(document).ready(function() {

    $(".video").click(function() {
        $.fancybox({
            'padding'       : 0,
            'autoScale'     : false,
            'transitionIn'  : 'none',
            'transitionOut' : 'none',
            'title'         : this.title,
            'width'         : 640,
            'height'        : 385,
            'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type'          : 'swf',
            'swf'           : {
            'wmode'             : 'transparent',
            'allowfullscreen'   : 'true'
            }
        });

        return false;
    });



});
like image 913
Andres Avatar asked Jan 13 '12 16:01

Andres


People also ask

How do I open fancyBox on button click?

jQuery(document). ready(function($) { $('button'). on('click', function() { $. fancybox(); }); });

What is fancyBox in HTML?

fancybox can be used to display any HTML element on the page. First, create a hidden element with unique ID: <div style="display: none;" id="hidden-content"> <h2>Hello</h2> <p>You are awesome.</p> </div>

What is fancyBox in Javascript?

Fancybox saves you time and helps to easily create beautiful, modern overlay windows containing images, iframes, videos or any kind of HTML content. This is the 4th generation of Fancybox and brings lots of fresh features.


2 Answers

Ive encounter this problem before and was able to find a solution. Here is what iv done. in my iframe page i called the parent window with the href e.g. onClick="callMe('www.google.com')" or if pics "/images/pics.png" and call this script in my parent page

<script type="text/javascript"> 
 function callMe(site){ 
      $(".sample").fancybox({ 
         'width' : '97%', 
         'height' : '97%', 
         'href' : ''+site+'' //force href to change its site from the call function in the iframe page 
      }); 
      readyFancy() call to trigger the decoy link page 
 } 

 function readyFancy(){ 
      $("a.sample").trigger("click"); 
 } 
 </script> 

in my parent html we right a decoy link (this one is from the example on load fancybox)

<body> 
<a href="#" class="sample"></a> 
</body> 

You can download a working example here.. https://docs.google.com/file/d/0B1TI7BdxGAbvYzBiZjNiMDYtNjY4ZS00NDczLWE2YjQtODNlMjU4YTNjYWI0/edit?authkey=CP_H9rAC

like image 145
drexsien Avatar answered Oct 11 '22 07:10

drexsien


First, you should be using fancybox v2.x to seamlessly do that (patching fancybox v1.3.x doesn't worth the effort)

Second, you need to have in both pages, the parent page and the iframed page, loaded jquery and fancybox css and js files in order to transcend fancybox properly,

so in both pages you should have at least something like:

<link rel="stylesheet" type="text/css" href="fancybox2.0.4/jquery.fancybox.css" />

and

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="fancybox2.0.4/jquery.fancybox.js"></script>

then in your iframed (child) page your script is basically the same (but with the right fancybox options for v2.x ... check the documentation here)

$(".video").click(function() {
        $.fancybox({
            'padding'       : 0,
            // more options (v2.x) etc

but instead of this

        $.fancybox({

do this:

        parent.$.fancybox({

then fancybox will show in the parent page out of the boundaries of the iframed page

UPDATE: Demo page here

like image 22
JFK Avatar answered Oct 11 '22 09:10

JFK