call Fancybox in parent from iframe

后端未结

关注

 3  1453

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.

相关标签:

3条回答

轮回少年

2020-11-22 17:12
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
0 讨论(0)
发布评论:

提交评论
- 加载中...
[愿得一人]

2020-11-22 17:17
Since the img is on an iframe is a different webpage. So Jquery is on index.html but the img doesnt, thats why JQuery cant get to the image.

Maybe using something like this... But i dont think it would work

On index.html script part
```
$(document).ready(function () {
    //function to active fancybox on the thumbs class inside the iframe
    //Not sure it works on iframes, probably it doesnt.
    $("#iframeID.thumbs").fancybox();
});
```
And add the id to the iframe declaration < iframe src=\"social.html\" id="iframeID" etc... rest of properties>

But, my advice is to use divs instead of iframes. You also should remove the onclick from the image for non-obstrusive Javascript.

Check the tutorial: http://fancybox.net/howto If you want a similar tutorial in spanish you can check my site too.
0 讨论(0)
发布评论:

提交评论
- 加载中...
死守一世寂寞

2020-11-22 17:20
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
0 讨论(0)
发布评论:

提交评论
- 加载中...