Calling Fancybox from a page inside an iframe

[Armando Basile]

Hi all,
i trying to use fancybox but my page is loaded inside an iframe, so
when i open fancybox, it show under bottom of scree ( i need to scroll
down to see it). Iframe have scrolling="no" and height="1600".

Could you help me ?

[JFK]

http://fancybox.net/faq
see No. 3

[ikalatch]

I have the same problem: a page includes an iframe that is pretty long
and scrollable and inside that iframe I open a fancybox (which also
includes yet another iframe, but this is irrelevant here).
Fancybox calculates the center of the iframe inside which it has to
display itself and positions quite low on the screen because the
iframe is long.
I'd like it to be positioned in the center of the browser viewport
instead.
What I found to (somewhat) work is to use this callback when defining
the attributes of fancybox (using version 1.3.1):
'onComplete': function() {
$("#fancybox-wrap").css({
'top':'10px',
'left':'10px'
})}
It works - moves the fancybox where I want it inside the iframe, but
one problem is that it first shows it in the original position and
then repositions it which is mildly annoying.
I haven't found a good way to show it in the position I want it when
it first gets drawn. Replacing 'onComplete' with 'onStart' doesn't do
anything.
I guess one way would be to have somehow make it invisible on onStart
and then make it visible on onComplete when it has been repositioned.

Any suggestions would be appreciated!

[JFK]

same

http://fancybox.net/faq
see No. 3

[ikalatch]

I understand that it can not be displayed outside of the iframe - this
is obvious, but at least we should be able to easily position it
explicitly where we want it (towards the top in my case).
To turn the question around - forget about the iframe: Basically it
would be great if we had another two public attributes (X & Y
positions) that allow us to explicitly position the box when it's
first drawn - right now it gets always drawn in the center and while
it may work for most cases, it's not desirable in others (as we see in
the case of iframes). And, of course, a third option one similar to
centerOnScroll which keeps the box in this position on scrolling.
Actually, centerOnScroll can be renamed to something like
keepPositionOnScroll and it can easily accommodate both cases - when
it's centered and when it's explicitly positioned. So, for example, if
we have: XPos=10px, YPos=10px, keepPositionOnScroll=true, the box
would stay in that position (10px from the top and left) when the
vertical or the horizontal scrollbars of the viewport are moved.

On Mar 25, 8:07 pm, JFK <jfk.d...@gmail.com> wrote:
> samehttp://fancybox.net/faq

> see No. 3
>
> On Mar 25, 8:39 am, ikalatch <ikalatc...@neosaej.com> wrote:
>

> > I have the same problem: a page includes aniframethat is pretty long
> > and scrollable and inside thatiframeI open a fancybox (which also
> > includes yet anotheriframe, but this is irrelevant here).
> > Fancybox calculates the center of theiframeinside which it has to

> > display itself and positions quite low on the screen because the

> >iframeis long.

> > I'd like it to be positioned in the center of the browser viewport
> > instead.
> > What I found to (somewhat) work is to use this callback when defining
> > the attributes of fancybox (using version 1.3.1):
> >                     'onComplete': function() {
> >                             $("#fancybox-wrap").css({
> >                             'top':'10px',
> >                             'left':'10px'
> >                     })}

> > It works - moves the fancybox where I want it inside theiframe, but

[JFK]

>I understand that it can not be displayed
>outside of the iframe -
>this is obvious,

Not that obvious.
http://fancybox.net/faq No. 3 also says : "....... You can modify
FancyBox source to suit your needs"
And a fellow fancybox fan did try modifying it to his needs ... see
below copy of the email (that I haven't tried it yet but it makes
sense to me)

>forget about the iframe: Basically it
>would be great if we had another

>two public attributes ...etc

let's the developer answer what he thinks of your suggestions

***copy of email **************
hi JFK it work, ive tried it using just a simple tweak, using the on
load
example $("a.sample").trigger("click");

here what ive 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>

******

[ikalatch]

Yep, this makes sense - the iframe calling a script on the parent page
which in turn renders the box in the parent's document.

On Mar 30, 5:26 pm, JFK <jfk.d...@gmail.com> wrote:
> >I understand that it can not be displayed
> >outside of the iframe -
> >this is obvious,
>

> Not that obvious.http://fancybox.net/faq No. 3 also says : "....... You can modify

[drex]

100% it works, i was the one who emailed JFK iv already tried it in my
live projects.

[Karmageddon]

THX to JFK!

[IGrahamL]

Does anyone have a working example of this - to avoid me randomly experimenting for hours on end 

Was just about to reluctantly give up on fancybox as everything was going great until i realised the limitation of opening fancybox from within a iframe

[JFK]

you may want to write drex (two comments above yours)

[drex]

you can download working example at this link
https://docs.google.com/leaf?id=0B1TI7BdxGAbvYzBiZjNiMDYtNjY4ZS00NDczLWE2YjQtODNlMjU4YTNjYWI0&hl=en&authkey=CP_H9rAC

[IGrahamL]

thanks for that, much appreciated
just as well your just a 'virtual m8' or I'd have to kiss you

[bcavan]

Are image galleries (using the rel="group") possible with the provided
example?



On Jan 13, 8:54 pm, drex <ands...@gmail.com> wrote:
> you can download working example at this linkhttps://docs.google.com/leaf?id=0B1TI7BdxGAbvYzBiZjNiMDYtNjY4ZS00NDcz...

[Matteo Santiloni]

Hi there, I've tried the code here: http://www.dallo.it/iframe/
but it doesn't work.

Can anyone help me? I really need this for a project.
thanks!

[JFK]

For fancybox v2.x see http://stackoverflow.com/a/8855410/1055987

[John Rotondo]

The code works, but cross-domain pages seem to be a problem. I'm trying to implement our product into a client site and I'm getting the error " Refused to display document because display forbidden by X-Frame-Options."

Any ideas on how to allow the content to be rendered in the iframe?

Thanks,

John

[JFK]

check http://stackoverflow.com/a/9393545/1055987

you could have found that using Google

[richard rosen]

having someone write to another member about a problem doesn't do any of the rest of us any good who have the same problem

[JFK]

@richard rosen : meaning?

[Leonard Carter]

I am having a related problem. I got it so it works, but using the example shown at the end of this thread, FancyBox always opens the first image in the gallery, rather than the image that was clicked. Is there some way to make it open properly in the parent frame and show the image in the slideshow that was clicked in the same process? I can do one or the other, but not both.

Thanks very much,

Jamie

[JFK]

@leonard Carte : could you post the code you are using (both jQuery and html)? (this post is very old and there has been so many changes in the meantime) could you also tell what version of fancybox?

[sanath pixsence]